Как обрезать блоки так, как это показано на картинке? Я делал это через градиенты, но он получился не особо функциональным.
-
Уточните, пожалуйста, что значит обрезать? Непонятно, что имеется ввиду.– mr.Mouse30 мая 2016 в 22:26
-
Блок с цифрой обрезан в форме пятиугольника и необходимо сделать что-то подобное– Tyler Maning30 мая 2016 в 22:27
-
2Статья вам в помощь Геометрические фигуры на CSS– mr.Mouse31 мая 2016 в 0:03
Добавить комментарий
|
1 ответ
Идея следующая: создаётся прямоугольник с нужным содержимым, к нему псевдоэлементом добавляется треугольник с нужной стороны. Строится треугольник через свойство border - длина бордера на каждой стороне форму треугольника.
В примере ниже выделил разными цветами для наглядности:
.main {
width: 100px; height: 50px;
background: tomato; /* основной цвет заливки фона */
}
.main:after {
content: '';
position: relative;
top: 0; left: 100px;
display: block;
width: 0px; height: 0px;
border: 25px solid transparent;
border-left-color: pink; /* основной цвет заливки фона */
}
<div class="main"></div>