I need to create such a figure, but I do not know how to cut corners. A border comes to mind through after and before with overflow: hidden, but I don’t know how to implement it.

enter image description here

Here is my figure with the background:

.title-head { width: 358px; height: 80px; background-image: linear-gradient(180deg, #d6c0a6 0%, white 100%, #ff3f00 100%, white 100%); } 
 <div class="title-head"> </div>

  • 2
    Possible duplicate question: How to transform a block into a trapeze css3 - Sasha Omelchenko
  • and where are the corners cut? I see a gradient and transformation along one of the axes. I do not see cut corners - Alexey Shimansky
  • @SashaOmelchenko, cut corners can be not only transformations, so this question is more general than the one proposed by you. - ߊߚߤߘ

1 answer 1

So fit? https://jsfiddle.net/Benedetta/n8a0sL0e/

Only here the angle is different.

 .title-head { position: relative; width: 358px; height: 80px; background-image: linear-gradient(180deg, #d6c0a6 0%, white 100%, #ff3f00 100%, white 100%); } .title-head:before { content: ''; position: absolute; top: 0; left: 0; border-top: 80px solid transparent; border-left: 80px solid white; width: 0; } .title-head:after { content: ''; position: absolute; top: 0; right: 0; border-top: 80px solid transparent; border-right: 80px solid white; width: 0; }