-3

I'm not familiar working with this type of CSS effect.

I need an approach that allows me to create a line with a "v" effect in a HTML element using HTML and CSS. The image below shows what I need to accomplish.

Header Menu

Salva
  • 6,507
  • 1
  • 26
  • 25
Nudier Mena
  • 3,254
  • 2
  • 22
  • 22
  • could you please share with us the code that you already have? There are plenty of CSS-trick sites that will surely have exactly this problem solved for you. – Zim84 Aug 19 '20 at 18:44
  • I have not created nothing yet. The image is a wireframe created in zeplin – Nudier Mena Aug 20 '20 at 00:53
  • There is your problem. Stackoverflow is to help you debug and improve your code, not to code for you. – Zim84 Aug 20 '20 at 05:58

1 Answers1

1

Tried two solutions, you can see if any help you. First one used this approach.

div {
  height: 1px;
  width: 200px;
  background: transparent;
  position: relative;
  cursor:pointer;
  border-bottom:1px solid black;
  border-right:1px solid black;
  border-left: 0px solid black;
  
  border-radius:10px;
}
div:before {
  content: "";
  position: absolute;
  top: -webkit-calc(100% - 10px); /*may require prefix for old browser support*/
  top: calc(100% - 10px); /*i.e. half the height*/
  left: 90px;
  height: 20px;
  width: 20px;
  background: white;
  transform: rotate(45deg);
  border-bottom:inherit;
  border-right:inherit;
  box-shadow:inherit;
}
<div></div>

This link might give you more ideas.

    #triangle {
      position: relative;
      text-align: center;
      padding: 10px;
      margin-bottom: 6px;
      height: 200px;
      width: 200px;
    }
    #triangle:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 1%;
      width: 50.5%;
      background: black;
      transform: skew(0deg, 30deg);
      }
    #triangle:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      height: 1%;
      width: 49.5%;
      background: black;
      transform: skew(0deg, -30.5deg);
      }

  
<div  id="triangle"></div>
Sam
  • 723
  • 5
  • 18