Вот еще один подход, использующий CSS transform: skew(45deg) для создания эффекта угла среза.Сама форма включает три элемента (1 реальный и 2 псевдоэлемента) следующим образом:
- Основной контейнер
div элемент имеет overflow: hidden и создает левую границу. - Псевдоэлемент
:before, который на 20% больше высоты родительского контейнера и к нему применено перекосное преобразование.Этот элемент обрабатывает границу сверху и обрезает (наклонную) границу с правой стороны. - Псевдоэлемент
:after, который составляет 80% высоты родителя (в основном, оставшейся высоты), и создаетнижняя граница, оставшаяся часть правой границы.
Полученный результат является адаптивным, создает прозрачный вырез в верхней части и поддерживает прозрачный фон.
div {
position: relative;
height: 100px;
width: 200px;
border-left: 2px solid beige;
overflow: hidden;
}
div:after,
div:before {
position: absolute;
content: '';
width: calc(100% - 2px);
left: 0px;
z-index: -1;
}
div:before {
height: 20%;
top: 0px;
border: 2px solid beige;
border-width: 2px 3px 0px 0px;
transform: skew(45deg);
transform-origin: right bottom;
}
div:after {
height: calc(80% - 4px);
bottom: 0px;
border: 2px solid beige;
border-width: 0px 2px 2px 0px;
}
.filled:before, .filled:after {
background-color: beige;
}
/* Just for demo */
div {
float: left;
color: beige;
padding: 10px;
transition: all 1s;
margin: 10px;
}
div:hover {
height: 200px;
width: 300px;
}
div.filled{
color: black;
}
body{
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<div class="cut-corner">Some content</div>
<div class="cut-corner filled">Some content</div>
Ниже приведен еще один способ получения эффекта угла среза с помощью linear-gradient фоновых изображений.Используется комбинация из 3 градиентных изображений (приведенных ниже):
- Один линейный градиент (под углом вниз слева) для создания эффекта угла среза.Этот градиент имеет фиксированный размер 25px x 25px.
- Один линейный градиент для обеспечения сплошного цвета слева от треугольника, который вызывает эффект обрезки.Градиент используется, хотя он дает сплошной цвет, потому что мы можем контролировать размер, положение фона только при использовании изображений или градиентов.Этот градиент расположен на уровне -25px по оси X (в основном это означает, что он закончится до того места, где присутствует разрез).
- Другой градиент, аналогичный приведенному выше, который снова дает сплошной цвет, но расположен на 25pxвниз по оси Y (опять же, чтобы пропустить область обрезки).
Полученный вывод отзывчив, производит прозрачный разрез и не требует каких-либо дополнительных элементов (реальных или псевдо).Недостатком является то, что этот подход будет работать только в том случае, если фон (заливка) имеет сплошной цвет, и очень трудно создать границы (но все же возможно, как видно из фрагмента).
.cut-corner {
height: 100px;
width: 200px;
background-image: linear-gradient(to bottom left, transparent 50%, beige 50%), linear-gradient(beige, beige), linear-gradient(beige, beige);
background-size: 25px 25px, 100% 100%, 100% 100%;
background-position: 100% 0%, -25px 0%, 100% 25px;
background-repeat: no-repeat;
}
.filled {
background-image: linear-gradient(black, black), linear-gradient(black, black), linear-gradient(black, black), linear-gradient(black, black), linear-gradient(to bottom left, transparent calc(50% - 1px), black calc(50% - 1px), black calc(50% + 1px), beige calc(50% + 1px)), linear-gradient(beige, beige), linear-gradient(beige, beige);
background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px, 25px 25px, 100% 100%, 100% 100%;
background-position: 0% 0%, 100% 25px, -25px 0%, 0px 100%, 100% 0%, -25px 0%, 100% 25px;
}
/* Just for demo */
*{
box-sizing: border-box;
}
div {
float: left;
color: black;
padding: 10px;
transition: all 1s;
margin: 10px;
}
div:hover {
height: 200px;
width: 300px;
}
body{
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<div class="cut-corner">Some content</div>
<div class="cut-corner filled">Some content</div>
