Adding Border to Css Triangle [Duplicate]
I Have a Triangle. Triangle-Left { Width: 0; Height: 0; Border-Top: 22Px Solid Transparent; Border-Bottom: 22Px Solid Transparent; Border-Right: 22Px Solid...
![Adding Border to Css Triangle [Duplicate]](https://www.alledaags.nl/uploads/adding-border-to-css-triangle-duplicate_1200.jpg)
I have a triangle
<div class="triangle-left"></div>
.triangle-left {
width: 0;
height: 0;
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
border-right: 22px solid white;
}
How do I draw the outline of a CSS triangle, considering border itself is used to make the triangle? External divs?
One way to do it is the create an inner triangle which is smaller.
.triangle-left {
width: 0;
height: 0;
border-top: 23px solid transparent;
border-bottom: 23px solid transparent;
border-right: 23px solid red;
}
.inner-triangle {
position: relative;
top: -20px;
left: 2px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid blue;
}<div class="triangle-left">
<div class="inner-triangle"></div>
</div>This is how I would do it.
.triangle-left {
width: 0;
height: 0;
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
border-right: 22px solid black;
position: relative;
}
.triangle-left:after {
content: '';
width: 0;
height: 0;
border-top: 21px solid transparent;
border-bottom: 21px solid transparent;
border-right: 21px solid #dddddd;
position: absolute;
top: -21px;
left: 1px;
}<div class="triangle-left"></div>Here it is on JSFiddle.
Sarah Jenkins is a veteran tech journalist with over 12 years of experience covering artificial intelligence, mobile innovations, and digital ethics. Her insights have appeared in leading technology publications worldwide.
