dogeared shape with css only

by Kheema Pandey

HTML

<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
 <g>
    <polygon id="mypol" points="0 0 50 0 50 25 25 50 0 50" fill="red"></polygon> 
  </g>
</svg>

<div></div>

<div class="one"></div>

CSS

#mypol{
    fill:blue;
}

div{
    width: 50px;
    height: 50px;    
    background: linear-gradient(135deg, #333 0%, #333 90%, transparent 90%, transparent 100%);
}


.one{
    width: 200px;
    height: 50px;    
    background: linear-gradient(-250deg, #333 0%, #333 90%, transparent 90%, transparent 100%);
  text-align:center;
}