pointed border radius in list

Question

How do I make an pointed border-radius as the example in the img? I have found several ways to make a full arrow to the right or left, but I want only an border of 1px.

I have built this in an UL and than an LI. This is because I think that this is the best way to generate this "breadcrumb".

<ul>
    <li>Back</li>
    <li>Home</li>
    <li>Events</li>
    <li>Event Item</li>
</ul>

It is expected that you at least attempt to code this for yourself. Stack Overflow is not a code writing service. I would suggest that you do some additional research, either via Google or by searching SO, make an attempt and. if you still have trouble, come back with **your code** and explain what you have tried and why it did not work. — Paulie_D, Jun 23 '16 at 09:22
I can only think of a really tricky and hacky way to do this. If you're interested here's a creative one http://stackoverflow.com/questions/12041938/how-to-create-a-triangle-in-css3-using-border-radius — casraf, Jun 23 '16 at 09:23

Sooraj · Answer 1 · 2016-06-23T09:31:13.930

You cannot do it using border-radius, you have to use :after ,:before pseudo elements.

There might be another approaches as well , but this is one method that i use personally.

.breadcrumb { 
 list-style: none; 
 overflow: hidden; 
 font: 18px Helvetica, Arial, Sans-Serif;
}
.breadcrumb li { 
 float: left; 
}
.breadcrumb li a {
 color: white;
 text-decoration: none; 
 padding: 10px 0 10px 65px;
 
 background: #03C9A9; 
 position: relative; 
 display: block;
 float: left;
}
.breadcrumb li a:after { 
 content: " "; 
 display: block; 
 width: 0; 
 height: 0;
 border-top: 50px solid transparent; 
 border-bottom: 50px solid transparent;
 border-left: 30px solid #03C9A9;
 position: absolute;
 top: 50%;
 margin-top: -50px; 
 left: 100%;
 z-index: 2; 
}

.breadcrumb li a:before { 
 content: " "; 
 display: block; 
 width: 0; 
 height: 0;
 border-top: 50px solid transparent;       
 border-bottom: 50px solid transparent;
 border-left: 30px solid white;
 position: absolute;
 top: 50%;
 margin-top: -50px; 
 margin-left: 1px;
 left: 100%;
 z-index: 1; 
}

<ul class="breadcrumb">
 <li><a href="#">item1</a></li>
 <li><a href="#">item2</a></li>
 <li><a href="#">item3</a></li>
 
</ul>

pointed border radius in list

1 Answers1