How to trim blocks as shown in the picture? I did it through gradients, but it turned out not very functional. Example

  • Please specify what it means to cut? It is not clear what is meant. - mr.Mouse
  • The block with the number is cut off in the shape of a pentagon and something like this needs to be done - Tyler Maning
  • one
    An article to help you Geometric shapes on CSS - mr.Mouse

1 answer 1

The idea is as follows: a rectangle is created with the desired content, a pseudo-element is added to it with a triangle on the right side. A triangle is built through the property border - the length of the border on each side of the triangle shape.

In the example below, I highlighted it in different colors for clarity:

.main { width: 100px; height: 50px; background: tomato; /* основной цвет заливки фона */ } .main:after { content: ''; position: relative; top: 0; left: 100px; display: block; width: 0px; height: 0px; border: 25px solid transparent; border-left-color: pink; /* основной цвет заливки фона */ } 
 <div class="main"></div>