Как нарисовать подобную фигуру?

Question

[▪ ▪]

Можно ли как то нарисовать с помощью css подобную фигуру чтобы она всегда была внизу слайда на всю ширину экрана?

Answer 1

[Сергей delphinpro]

Проще всего сделать SVG фигуру.
Почему все забывают про такой мощный и хорошо поддерживаемый инструмент? =)

https://codepen.io/delphinpro/pen/EXWexm

Comments

[Иван]

а где можно научиться свг рисовать вообще?Или ручками пишется он

[Сергей delphinpro]

Иван: Простые фигуры и руками можно (как я эту нарисовал), сложные в любом векторном редакторе.
Как научиться руками рисовать - просто изучить основные примитивы и их атрибуты.

[▪ ▪]

Иван: иллюстратор для этого есть.

Answer 2

[simka alien]

https://codepen.io/simkaUser/pen/WOpaWJ мои пять копеек

Answer 3

[Stalker_RED]

Можно как-то так:

.foo:after {
  content: 'bar';
  background-color: black;
  display: block;
  position: relative;
  top: -50%;
  width: 100%;
  height: 150%;
  transform: skewX(60deg) rotate(10deg);
}

грубая демка: https://jsfiddle.net/9Lpb1faL/
Точные углы и расположение подбирайте сами.

Или разбить на прямоугольные блоки а в них треугольники бордером сделать. Это и для довольно старых браузеров подойдет.

Comments

[▪ ▪]

При масштабировании идут искажения. Чем шире браузер тем менее правильная фигура.

[Stalker_RED]

Рикко: это потому, что размеры черного блока в процентах. Можно сделать ему фиксированный достаточно большой размер. Вы же не описывали как оно должно вести себя при масштабировании.
Но способ с треугольниками более пуленепробиваемый, имхо.

Answer 4

[Андрей Федоров]

Предложу свой вариант, на градиентах. Но солидарен с предыдущим оратором - углы подбирайте сами.
https://codepen.io/aliencash/pen/KqWBvL

Comments

[▪ ▪]

Появляется белая полоса при масштабировании.

[Андрей Федоров]

Ошибки браузера при поддержке единиц измерения vw/vh. Хотите кроссбраузерности - делайте в пикселах или картинкой.