JSFiddle - React, Tailwind, and code Playground

by Gajanan Bhat

HTML

<title>CSS triangle explanation </title>

<body>
  <div class="outer">
  <div class="triangle"></div>
  </div>
</body>

CSS

.triangle {
    width: 0p;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
  position:absolute;
  top:14px;
  left:18px;
}

.outer {
  border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 120px solid blue;
 width:0;
  height:0;
    
 
}