Triangle Shapes
<style>
* { box-sizing: border-box; }
.shape{
border-style:solid;
border-color:transparent;
border-width:0 80px 160px;
}
</style>
<div class="shape"></div>.shape {
border-bottom-color:#fe7070;
border-width:0 80px 160px;
}.shape {
border-top-color:#fe7070;
border-width:160px 80px 0;
}.shape {
border-right-color:#fe7070
border-width:80px 160px 80px 0;
}.shape {
border-left-color:#fe7070;
border-width:80px 0 80px 160px;
}.shape {
border-bottom-color:#fe7070;
border-radius: 25%;
}.shape {
border-bottom-color:#fe7070;
border-radius: 50%;
}.shape {
border-bottom-color:#fe7070;
transform: scale(1,0.5);
}.shape {
border-bottom-color:#fe7070;
transform: skew(18deg);
}
So,