How can I create a rounded arrow box using css3?

[Historical Forums User]

Hi guys,
using the below I can make a bit of a rounded arrow:

-webkit-border-radius: 20px 50px 50px 20px;
border-radius: 20px 50px 50px 20px;
But it is not sharp enough, the arrow box must have a fluid height so it can contain text that is responsive. Is this possible to do with css3? You can see what I’m trying to achieve by going to http://dev.aaronpitts.ch/lhc/ and clicking on the SDBS box. I just want more of an arrowed right side.

Many thanks

[Merri]

You can turn it from a circle into an oval by using 100% instead of 50px. This makes it look “sharper”.

[Daydreamer]

Hope this icon I created can help you :)

Link to fiddle

[sobu88]

hi,Aaron118

I think this is enough to your question.. :)

width:0;
height:0;
border-left: 100px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;

[Author]

Posts