JSFiddle - React, Tailwind, and code Playground

by karin

HTML

<div class="example"></div>

CSS

.example {
    margin:20px;
    width:90px;
    height:90px;
    border:medium solid transparent;
    border-right:60px solid red;
    border-top:60px solid red;
    -moz-border-radius: 90px;
    -webkit-border-radius: 90px;
    border-radius: 90px;
    /* future proofing */
    -khtml-border-radius:90px;
    /* for old Konqueror browsers */
}
.example:before {
    content:"";
    margin-top:20px;
    display: block;
    width: 90px;
    height: 90px;
    border-left:60px solid black;
    border-bottom:60px solid black;
    -moz-border-radius: 90px;
    -webkit-border-radius: 90px;
    border-radius: 90px;
    /* future proofing */
    -khtml-border-radius:90px;
    /* for old Konqueror browsers */
}
.example:after {
    content:"";
}