Hello! How can I hide a corner with css?

So it should be:

enter image description here

So it happened:

enter image description here

Link to the sandbox: https://jsfiddle.net/drtvader/Lxnsxhef/

<span class="b-file__icon">PDF</span> .b-file__icon { position: relative; top: 0; width: 37px; height: 45px; display: inline-block; background: rgba(68, 68, 68, 0.4); vertical-align: bottom; padding: 24px 0 0 0; text-align: center; font-size: 10px; } .b-file__icon:before { content: " "; position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 10px solid transparent; border-left: 10px solid transparent; } .b-file__icon:after { content: " "; position: absolute; top: 0; right: 0; width: 0; height: 0; border-bottom: 10px solid #969696; border-right: 10px solid transparent; }
  • break into three parts: a large bottom rectangle, a small rectangle on the upper left and a triangle on the right. - lexxl
  • You can add another triangle with the background color, in the place where it is needed. - Mr_Epic

1 answer 1

 div{ width:200px; height:300px; background:#999; position:relative; } div:after{ content:""; border:20px solid transparent; border-left:20px solid #fff; position:absolute; top: -20px; right: -20px; transform: rotate(-45deg); } div:before{ content:""; border:20px solid transparent; border-left:20px solid #dd9955; position:absolute; top: 8px; right: 9px; transform: rotate(134deg); z-index: 100; } 
 <div></div>

like this