how to make this arrow rounded?

Question

I'm using bootstrap to create my buttons, and I want to add a left or right point arrow to some of them but I want to be able to just add a class instead of creating extra markup to add the arrow. I'm currently using ::after and ::before to create the arrow, but I can't make the tip round, neither I can add the border bottom that my button has in order to make it look consistent. here's the codepen

http://codepen.io/mindgrinder/pen/nIfGy

If you only want to work with CSS than this is probably your best option, albeit rather messy. http://stackoverflow.com/questions/14446677/how-to-make-3-corner-rounded-triangle-in-css — codedude, Dec 16 '13 at 23:21

score 0 · Answer 1 · answered Dec 17 '13 at 06:27

0

I'm unsure if this is ideal, but it's a try: http://codepen.io/anon/pen/JFaxK I've used a CSS transform to achieve the effect. The only issue is the :after box is not being placed being the button. Tweaking is needed!

answered Dec 17 '13 at 06:27

Ahmed Sagarwala

400
2
13

score 0 · Answer 2 · answered Dec 17 '13 at 06:44

0

Here's the CodePen: http://codepen.io/anon/pen/gawIJ

What I did was quite simple, just 3 lines of CSS code.

margin-left:-20px;
border-radius: 35px 30px 30px 30px;
-webkit-transform:rotate(180deg);

The result

enter image description here

answered Dec 17 '13 at 06:44

Ali Gajani

14,762
12
59
100

yeah not what I was looking for. I need an arrow point but the point of the arrow needs to be slightly rounded not pointy. – Israel Bautista Jan 21 '14 at 22:54

score 0 · Answer 3 · answered Dec 30 '13 at 06:09

0

so this is what I ended up doing which worked perfectly

http://codepen.io/mindgrinder/pen/nIfGy

answered Dec 30 '13 at 06:09

Israel Bautista

119
1
9

how to make this arrow rounded?

3 Answers3