Is it possible to impose such a block as in the picture. Is it possible by means of css or easier to make a picture?

enter image description here

    1 answer 1

    You can, using pseudo-element : after

    .box { position: relative; background: #999; height: 150px; } .box:after { top: 100%; left: 20%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: #999 transparent transparent transparent; border-width: 25px 25px 0 0; margin-left: -15px; } 
     <div class="box">box</div>

    Added by:

    If a block and a triangle (rectangular) will have a shadow, then you will still have to make a picture.

    With an equilateral triangle, you can solve the shadow problem with the help of transform . For example: jsfiddle .

    • 2
      It may be worth adding. If the block and the triangle will have a shadow, you will have to make a picture and through css will not work - Alex Shimansky