Triangular pointer / horizontal line border

Question

I am trying to create a triangle pointer / border in a horizontal line.

Here is an example of what I'm trying to achieve:

I tried to manipulate the top border of the div, but everything I have done so far does not work at all.

Answer 1

There are several ways to achieve this, and this probably depends on your layout. One solution is to use a rotating element with borders on both sides.

.triangle { background: green; border: 2px solid white; border-width: 2px 2px 0 0; transform: rotate(-45deg); } 

 .box { background: green; width: 400px; height: 80px; position: relative; } .line { height: 39px; border-bottom: 2px solid white; } .triangle { background: green; border: 2px solid white; border-width: 2px 2px 0 0; transform: rotate(-45deg); position: relative; left: 300px; top: 28px; width: 20px; height: 20px; } 

 <div class="box"> <div class="line"> <div class="triangle"> </div> </div> </div> 

Answer 2

You can use the :before and :after pseudo-elements:

 body{ background:black; } div{ border-top:1px solid green; position:relative; margin-top: 100px; } div:before{ content: ''; position:absolute; left: calc(90% - 20px); top: -9px; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent black transparent; z-index: 10; } div:after{ content: ''; position:absolute; right:10%; top: -10px; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent green transparent; } 

 <div></div> 

Basically, there are two triangles, one of which has a background color with a large z-index , and the other in the border color.

Jsfiddle

Update

As @misterManSam mentioned, you can achieve this without using the z-index fiddle

Answer 3

 .box { margin-top: 100px; height: 50px; background: green; position: relative; } .box .line { position: absolute; top: 50%; left: 5px; right: 5px; margin-top: -1px; height: 2px; background: white; } .box .triangle { position: absolute; width: 0; height: 0; border-bottom: 8px solid white; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid transparent; top: 50%; right: 50px; margin-top: -15px; } .box .triangle .inner { position: absolute; top: -4px; left: -6px; width: 0; height: 0; border-bottom: 6px solid green; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid transparent; } 

 <div class="box"> <div class="line"></div> <div class="triangle"><div class="inner"></div></div> </div> 

Answer 4

This can be achieved using a single div element.

Here is a quick demo:

 html,body{background:green; height:100%;padding:0;margin:0;overflow:hidden;} .line { margin-top: 50px; height: 5px; width: 80%; background: #fff; position: relative; box-sizing: border-box; } .line:after, .line:before { content: ""; position: absolute; } .line:after { left: calc(100% + 2px); height: 25px; width: 25px; top: -13px; border-top: 5px solid #fff; border-left: 5px solid #fff; transform: rotate(45deg); } .line:before { height: 100%; top: 0; left: calc(100% + 34px); width: 20%; background: inherit; } 

 <div class="line"></div>