Как сделать такой пятиугольник в css?

Question

[MegaPuxapb]

Answer 1

[Exploding]

Вот тут https://css-tricks.com/examples/ShapesOfCSS/ много примеров. Думаю будет достаточно, чтобы "въехать в эту кухню":)

UPD
Чтобы внутри нормально располагался контент, была тень, бодер, прозрачность и т.д. - я бы наверно делал так:
1. Создал врапер с position: relative.
2. Внутрь положил 4 блока:
- 3 блока это отдельные фигуры (у каждой своя роль) из ответа supertrolyaso наверно лучше подойдет, z-index 1, 2 и 3. Т.е. Нижний с filter: blur(2px) и смещен (тень), средний типа основа и верхний (внутренний бордер) ну можно transform: scale(0.9), или размеры поменять... background-color:transparent и border....
- 1 блок для контента естественно.
Но возможно и другой способ есть более простой. Хз.

Comments

[MegaPuxapb]

фигурки по ссылке с заливкой.
а мне надо без заливки и с бордером)

[Exploding]

MegaPuxapb, основной смысл в использовании псевдоэлементов :before & :after. Что же вам мешает убрать заливку и установить требуемый border?

[MegaPuxapb]

это из вашей ссылки:
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
например:
как этот треугольник сделать прозрачным с бордером в 2px, если тут уже уже есть бордеры в 50 и 100px?
это касается и бефоров/афтеров в других фигурах.

[Exploding]

MegaPuxapb, обновил ответ

Answer 2

[Yaroslavv]

https://bennettfeely.com/clippy/

Comments

[MegaPuxapb]

занятная вещь, только бордер туда криво становится.

[greg_13]

Может оно не подходило под решение задачи данного вопроса, но какой же это крутой сайт. Ты буквально спас мою 5точку от лютого разрыва. Спасибо)

Answer 3

[forspamonly2]

правильный ответ: такой пятиугольник в css делать не надо.

если есть возможность, он должен быть нарисован в фоновой картинке прямо поверх котов, чтобы в разметке было только текстовое содержимое.

если почему-то такой возможности нет, тогда сделать его в виде svg.

делать это на цсс имеет смысл только в качестве силового упражнения. например, так: https://codepen.io/anon/pen/WJQaaq

Answer 4

[supertrolyaso]

Вот как вариант: https://codepen.io/anon/pen/YLyLmZ

Comments

[MegaPuxapb]

как сделать такую же, только с прозрачную и с бордером?)