JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<h1>CSS Triangle</h1>
<h2>changing the height</h2>
<div class="tri"></div>
<div class="tri eq"></div>
<h2>changing the angle</h2>
<div class="tri ls"></div>
<div class="tri rs"></div>
<div class="tri ang"></div>
<p>
    For changing oreientation, go to the reference: <a href="http://css-tricks.com/examples/ShapesOfCSS/">The Shapes of CSS</a>
</p>

CSS

.tri {
    width: 0;
    height: 0; 
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 
    border-bottom: 20px solid #252525;
}
.ls {
    border-left: none; 
}
.rs {
    border-right: none; 
}
.ang {
    border-left-width:10px;
    border-right-width:15px;
}
.eq {
    border-bottom-width: 40px;
}