Как с помощью css нарисовать геометрическую фигуру?

Question

[game802]

Добрый вечер уважаемые знатоки. Как с помощью css реализовать такую фигуру?

Большое спасибо!

Comments

[Модератор]

game802, за порчу вопросов будет больно.

Answer 1

[Сергей Горячев]

Как-то так) Без SVG и для любого фона)
https://jsfiddle.net/webirus/qm7sxj2x/1/

Comments

[game802]

очень оригинально! :D Большое спасибо за помощь и за настроение!

Answer 2

[Sn0wSky]

https://jsfiddle.net/814646ey/

Цвет border-right замените на цвет фона
Высоту border-top и border-bottom на половину высоты Вашего блока
А с шириной border-right поиграйтесь так, чтобы он выпирал на столько, на сколько Вам нужно (если задать то же самое число, что и в border-top/border-bottom, получите прямой угол)

UPD.: Ярослав верно заметил, но можно обойтись без svg, даже если нужна прозрачность
https://jsfiddle.net/814646ey/2/

Comments

[game802]

Большое спасибо за помощь и разъяснения!

[Sn0wSky]

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

[game802]

Sn0wSky: да ничего страшного, мне нужно было уловить саму суть построения такой фигуры. Все равно, большое спасибо за труд и помощь!

Answer 3

[Ярослав Иванов]

То, что предложил Sn0wSky вполне норм если не учитывать фон. Если фон будет цветной то лучше использовать отрисовку в SVG.

https://jsfiddle.net/sx30u1m3/2/

Comments

[game802]

Да, нужна было с учетом фона, но забыл это указать в вопросе... большое спасибо за помощь!

[Сергей Горячев]

Там и без SVG рисуется норм)

[Ярослав Иванов]

Sergey Goryachev: Да что-то в голову не пришло твое решение, оно легче) HackOwnB: я ссылку поправил. Удалил лишнее.

[game802]

Ярослав Иванов: ничего страшного, главное - сама суть реализации данной фигуры. Еще раз большое спасибо за помощь!