Как сверстать такой блок?

Question

[L1nw0od]

ДОброго времени суток, подскажите пожалуйста как сверстать такой блок ?
Самое главное чтоб он был ризиноывм и не искажался при смене разрешения (((
Я уже кучу всего перепробовал не могу сделать (((

Answer 1

[Ankhena]

Как-то так https://jsfiddle.net/nuvveo53/

А еще лучше так (и с текстом): https://jsfiddle.net/Ankhena/kmkos2zx/

Доработать требуется calc и позиционирование. Надо посчитать углы и на js вставлять.
(Может и без js можно обойтись, надо подумать)

Либо clip-path.

Comments

[Ankhena]

https://www.calc.ru/raschet-treugolnika.html
Да, от ширины высчитаете ручками константу и подставите во второй пример. От одного треугольника в left, а двух других в calc ширины.

Answer 2

[ink]

Вот смотрите просто же ?

Answer 3

[Денис Киселев]

Попробуй:

.box {
  transform: skewX(10deg);
}
.box > * {
  transform: skewX(-10deg);
}

Comments

[L1nw0od]

Оно только наклоняет, а там справа еще есть отступ снизу (( я пытаюсь полигоном сделать но блин это ужас что выходит при масштабировании

Answer 4

[forspamonly2]

как вариант, svg в data-uri на фоне

h3 {
 background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 
viewBox='0 0 200 10' preserveAspectRatio='none'%3E
%3Cpath d='M 1 0 H 198 L 199 9 L 2 10 z' fill='#ddd'/%3E%3C/svg%3E");  
}

https://jsfiddle.net/tzf9Lnnv/2/

Answer 5

[Stalker_RED]

Правый угол обязательно должен попадать четко в границу?
Если не обязательно, то как-то так: https://jsfiddle.net/tzf9Lnnv/

Если обязательно, то боюсь, что без clip-path не обойдется.

Comments

[L1nw0od]

Да должен обязательно попадать, значит я правильно понимаю тогда мой вариант ?