Add border to triangle using pure CSS
So, I created a triangle that points to background color # 222 using pure CSS. I want to add a 1px red border to this triangle, but I have no idea how.
.arrow-tip {
width: 0; height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #222;
}
+3
source to share
2 answers
The only way you could do something like this is to create another arrow exactly like this and place it in the first one to fake the border like this:
.arrow-tip {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #222;
position: relative;
}
.arrow-tip:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
bottom: -16px;
left: -17px;
z-index: -1;
border-left: 17px solid transparent;
border-right: 17px solid transparent;
border-bottom: 17px solid red;
}
<div class="arrow-tip"></div>
You will need to play with the dimensions until you get it in the right direction.
+2
source to share
You can use the sudo selector :before
and :after
to create an arrow shape.
.arrow-tip {
position: relative;
margin-top: 100px;
}
.arrow-tip:after,
.arrow-tip:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow-tip:after {
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #222;
border-width: 15px;
margin-left: -15px;
}
.arrow-tip:before {
bottom: -1px;
border-color: rgba(0, 0, 0, 0);
border-bottom-color: red;
border-width: 17px;
margin-left: -17px
}
<div class="arrow-tip"></div>
JsFiddle example: http://jsfiddle.net/tud0czmq/1/
+1
source to share