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
1
-
2If you only want to work with CSS than this is probably your best option, albeit rather messy. stackoverflow.com/questions/14446677/…codedude– codedude2013-12-16 23:21:46 +00:00Commented Dec 16, 2013 at 23:21
Add a comment
|
3 Answers
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!
Comments
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
1 Comment
Israel Bautista
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.
so this is what I ended up doing which worked perfectly