How to achieve triangular bevels in blocks using styles?

Question

css

Greetings! Please tell me how to use styles to achieve such bevels in blocks as in pictures 1 and 2, and the text can be of different heights - is it possible or only with the help of a script?

Answer 1

This can be done jsfiddle.net/SerzN1/bpmqbzsp
I don't think it's worth explaining that the 2nd option is easier
. In this option there are of course some limitations with backgrounds and the maximum width of the arrow.
If you need arrows on complex backgrounds, then you need to look here htmlbook.ru/blog/matritsa-preobrazovanii (in this scenario, height: 100% will work).
This feature was actively used on the sochi2014 website (it was closed), all the blocks were "skew" there.
The main thing is that if you don't run into only 1 element + pseudo-elements, then it's even much easier to do.

Answer 2

Geometric shapes in CSS

Answer 3

use pseudo elements. In your case :after
If it's not clear, here's an example - codepen.io/GoooodBoy/pen/dYKROB
UDP: Another option is via clip-path: polygon. It turns out rubber. The code on the codepen has been updated.

Answer 4

graphics