Как сделать такой блок со скошенными углами на css?

Question

[rudaki29rus]

Необходимо сделать вот такой блок:



Как это сделать?

Comments

[BadassRolf]

Друг, это 4 угла.

[rudaki29rus]

Да, действительно, обсчитался)))

[BadassRolf]

rudaki29rus: вот статья как сделать геометрические фигуры https://habrahabr.ru/post/126207/

[rudaki29rus]

BadassRolf: не катит, там бордером делается, а мне div блок нужен в картинкой на фоне и контентом.

[rudaki29rus]

Вопрос решен. Все оказалось куда проще.

Answer 1

[Денис Т]

transform
css.yoksel.ru/svg-shapes

Comments

[rudaki29rus]

не совсем понял как это использовать... вместо дива свг задавать?

[Денис Т]

rudaki29rus: можно вместо, можно background-image. с помощью svg такую фигуру легко нарисовать и делать с ней можно что угодно

[rudaki29rus]

Денис Тюкавин: вместо мне кажется не очень, т.к. семантика нарушится, а если беграунт-имейдж, то блок все равно прямоугольный будет.

[rudaki29rus]

Денис Тюкавин: нарисовал свг... все равно блок прямоугольный, а мне надо снизу такой же блок поставить в зеркальном отражении.

[Александр Филиппенко]

rudaki29rus: Так отразите. transform: scale(-1); и отрицательным margin-top или top поднимите его, чтобы края сошлись. Если у блока есть содержимое то его придётся так же отразить, либо повернуть.

[rudaki29rus]

Александр Филиппенко: Все, спасибо, разобрался!

[rudaki29rus]

Александр Филиппенко: реализовал вот так:

Но опять столкнулся с проблемой. Надо что бы справа и слева блок уприлипал к краям окна. Самому свн задал ширину 100%, а как скоординатам быть в этом случае?

[rudaki29rus]

код не вставляется

[Александр Филиппенко]

rudaki29rus: тут много вариантов. width: 100%; не подходит?

[rudaki29rus]

Александр Филиппенко: width - 100% это понятно, но это только ширина контейнера, а как указать что бы он по иксу на 100% был. polyline points="5,400 5,5 400,5 400,250 5,400"
fill="none" stroke="orangered" stroke-width="5"

[Денис Т]

rudaki29rus: а что с координатами не так?

[rudaki29rus]

Денис Тюкавин: как их в процентах задать? Если я задаю первую точку в процентах - блок пропадает.

[Александр Филиппенко]

выложите на jsfiddle что получается, а то так не понятно.

[rudaki29rus]

Александр Филиппенко: Придумал другое решение- дополнительными дивами через трансформ, но возникла проблема с их расположением.

Answer 2

[Sergey Semenov]

Можно свойством clip-path, сам такой делал, с поддержкой этого свойства тоже не очень. Есть генераторы clip-path по созданию любых фигур.

Comments

[rudaki29rus]

Я так понял это свойство то же для svg, для дива это не использовать?

[Alex Ander]

rudaki29rus, для div можно

Answer 3

[Nikita Shchypylov]

Пятиугольный?
Только в четвертом классе, а уже программист

Comments

[rudaki29rus]

ну обсчитался...