How to create a triangle / arrow shape using a border (right)
I need to create the following image in HTML / CSS only:
I tested and I was able to create a right rectangle with an arrow, but the arrow is on top and not on the side (you can see in the fiddle link):
The code that puts the arrow at the top looks like this:
.arrow_box:after, .arrow_box:before {
border: 13px solid transparent;
position: absolute;
content: '';
left: 90%;
bottom:100%;
}
.arrow_box:after {
border-bottom-color: #fafafa;
border-width: 14px;
margin-left: -24px;
}
.arrow_box:before {
border-bottom-color: #999;
border-width: 15px;
margin-left: -25px;
}
Can anyone please help me move the arrow to the right. Note. I found that if I change the bottom color of the border to the border on the right, the arrow goes to the side, but the triangle is pointing in the wrong direction.
+3
source to share
2 answers
Anything you need
.arrow_box:after, .arrow_box:before { /* both border styles */
border: 14px solid transparent;
border-left-color: #f2f2f2;
position: absolute;
content: '';
left: 100%;
top: 15px;
}
.arrow_box:before { /* alter only for :before pseudo element */
border-left-color: #aaa;
border-width: 16px;
margin-top: -2px;
}
+3
source to share
This should work for you:
.arrow_box:after, .arrow_box:before {
border: 13px solid transparent;
position: absolute;
content: '';
left: 107%;
bottom: 60%;
}
.arrow_box:after {
border-left-color: #eee;
border-width: 14px;
margin-left: -24px;
}
.arrow_box:before {
border-left-color: #aaa;
border-width: 16px;
margin-left: -24px;
top: 34px;
}
-1
source to share