CSS triangle
Drawing an isosceles triangle with its apex down, up, right, left by means of CSS.
Triangle down
CSS triangle with its apex turned down:
HTML code:
<div class="example">
<div></div>
</div>
CSS code:
.example div {
display: inline-block;
border-left: 40px transparent solid;
border-right: 40px transparent solid;
border-top: 56px #c00 solid;
}
Triangle up
CSS triangle with its apex turned up:
HTML code:
<div class="example">
<div></div>
</div>
CSS code:
.example div {
display: inline-block;
border-left: 40px transparent solid;
border-right: 40px transparent solid;
border-bottom: 56px #c00 solid;
}
Triangle right
CSS triangle with its apex turned right:
HTML code:
<div class="example">
<div></div>
</div>
CSS code:
.example div {
display: inline-block;
border-left: 56px #c00 solid;
border-top: 40px transparent solid;
border-bottom: 40px transparent solid;
}
Triangle left
CSS triangle with its apex turned left:
HTML code:
<div class="example">
<div></div>
</div>
CSS code:
.example div {
display: inline-block;
border-right: 56px #c00 solid;
border-top: 40px transparent solid;
border-bottom: 40px transparent solid;
}
Browser support
- Windows
- Internet Explorer 8.0+
- Firefox 3.0+
- Google Chrome
- Opera 7.50+
- Safari 3.1+
- SeaMonkey 2.0.14+
- Linux
- Firefox 3.0+
- Google Chrome / Chromium
- Opera 7.50+
- SeaMonkey 2.0.14+
- NetSurf 3.0+
- Hv3