Как можно сделать блок такой формы?

Question

[notveganmustdie]

Как это можно реализовать? Т.е чтобы блок был формы как зеленая область. Я видел статью как делают всякие геометрические фигуры на css с помощью border, но нигде не нашел более подробного описания. Выручайте)

Comments

[Дмитрий Гавриленко]

тоже постоянно видел на css border стрелки от блоков. так и не понял как их делают.

[Андрей Б.]

Дмитрий Гавриленко тут нет ничего сложного - habrahabr.ru/post/126207, поиграйте со значениями и разберетесь

Answer 1

[Андрей Б.]

jsfiddle.net/ntk7kvbp/5

UPD:
Взглянул на свой вариант и подумал, можно ведь обойтись одним псевдоэлементом.
И получилось следующее: jsfiddle.net/ntk7kvbp/12 в хроме немного ухудшается качество, видны "лесенки". В других браузерах получше.

Возникла еще идея, если потребуется удлинить пустую середину. Можно элементу задать overflow: hidden; а его псевдоэлементу отрицательный bootom отступ. Регулируя border-top и bottom можно добиваться нужного угла и ширины центра.
В общем вот пример - jsfiddle.net/ntk7kvbp/11

Ну и последнее, автоширина, в первом варианте размеры указанны жестко и если увеличить ширину контейнера то псевдоэлемент останется на месте.
Можно сделать так - jsfiddle.net/ntk7kvbp/10, конечно хотелось бы, чтобы тянулся сам бордер, но к сожалению этого эффекта не добиться, ну хоть так ).

Comments

[Дмитрий Гавриленко]

основано на том, что какая-то из сторон прозрачная, и блок падает?

[Дмитрий Гавриленко]

точнее сторона

[Андрей Б.]

Дмитрий Гавриленко да, фишка в прозрачности. Про падение не понял, что вы имеет ввиду.

[Дмитрий Гавриленко]

Андрей Б.: ну типа если сделать border-left прозрачным, то top left угол упадет (состыкуется, найдет себе подобных, называйте как хотите xD) на bottom left угол, потому что его ничего не "держит" xD. Получается треугольник.
|\
| \
| \
|____\

[Андрей Б.]

Дмитрий Гавриленко Ну типо да. Я вам в комменте под вопросом дал ссылку habrahabr.ru/post/126207, там есть различные уголки. Bместо transparent задайте любой другой цвет и поиграйте со значениями border, увидите как это работает

[Дмитрий Гавриленко]

Андрей Б.: в IE после "обновления" не работает (

[Андрей Б.]

Обновил ссылки и поправил текст. Оказалось что это из-за стиля рамки, работает только с solid. Иначе да, в IE не пашет, и не только в нем, в FF тоже. Тогда нужно использовать solid, качество плохое только в хроме, в остальных нормально.

Answer 2

[Михаил Горячкин]

Вот вам пример.

Comments

[Дмитрий Гавриленко]

не, не то..

[Михаил Горячкин]

Что именно не то?

[Дмитрий Гавриленко]

Михаил Горячкин: Это закругление. А если понадобится больший угол? Тогда получится круг. Андрей Б. предложил то, что надо.

[Михаил Горячкин]

Согласен вариант Андрея больше подходит.

Answer 3

[Андрей]

В целом уже ответили, но вот другой вариант, с 1 псевдоблоком:
codepen.io/standys/pen/GgwQeP

Самый простой способ сделать треугольную область это воспользоваться свойством border — на стыке горизонтальной и вертикальной границы получается наклонная.