Help me create such corners in CSS. enter image description here

    2 answers 2

    .block{ background: #f00; height: 50px; width: 300px; margin: 25px auto; position: relative; } .block .corner{ background: #f00; position: absolute; top: 0; left: 94%; width: 30px; height: 100%; -webkit-transform:skewX(20deg); transform:skewX(20deg); } .block:before, .block:after{ content: ''; position: absolute; right: 100%; width: 0; height: 0; border-style: solid; } .block:before{ top: 0; border-width: 0 25px 25px 0; border-color: transparent #f00 transparent transparent; } .block:after{ bottom: 0; border-width: 0 0 25px 25px; border-color: transparent transparent #f00 transparent; } 
     <div class="block"> <span class="corner"></span> </div>

      Hope this helps you. CodePero

       body { background: #eee; } .container { width: 1000px; margin: 0 auto; } .example { height: 50px; background: #c0392b; -webkit-clip-path: polygon(25px 25px, 0px 0px, 980px 0px, 100% 100%, 0 100%); clip-path: url("#clipPolygon"); } 
       <div class="container"> <div class="example"></div> </div> <svg width="0" height="0"> <clipPath id="clipPolygon"> <polygon points="25 25,0 0,980 0,100% 100%,0 100%"> </polygon> </clipPath> </svg>

      • surprisingly incomprehensible. but cool - dirkgntly
      • @dDevil we just "cut off" the block at the desired proportions. CSS3 magic, no extras. - malginovdesign
      • @dDevil what, sorry? - malginovdesign