Необходимо карточке, с border'ом и фоном (всё на css), сделать срез у верхнего левого угла и, чтобы у него был такой же border. Пробовал clip-path. Возможно нужно использовать псевдоэлемент или SVG?
.Card {
margin: 23px 0 0 80px;
width: 320px;
height: 480px;
border: 4px solid #2ea8e6;
border-radius: 10px;
background-color: #f2f2f2;
overflow: hidden;
float: left;
position: relative;
clip-path: polygon(15% 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 10%);
}
Ответ
Решение через CSS3
Это можно сделать при помощи CSS3 clip-path, но согласно документации в Safari (WebKit), в Edge и в Internet Explorer это в данное время работать не будет.
Для того чтобы это сделать нам понадобится 2 прямоугольника (div), которые лежат один в другом. Внутренний прямоугольник расположен с помощью position: absolute сверху, а внешний выступает в качестве обводки (border), т.к. на 4px (x2) больше внутреннего. Оба они обрезаются с помощью CSS3 clip-path
Подробнее о свойстве clip-path читайте тут
.card-border
{
margin:14px;
position: relative;
width: 328px;
height: 488px;
background-color: #2ea8e6;
border-radius: 14px;
clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%, 0 10%);
}
.card
{
position: absolute;
top: 4px; /* соответствует ширине border */
left: 4px; /* соответствует ширине border */
width: 320px; /* container width - (ширина border * 2) */
height: 480px; /* container height - (ширина border * 2) */
background-color: #f2f2f2;
border-radius: 11px;
clip-path: polygon(14.7% 0, 100% 0, 100% 100%, 0 100%, 0 9.7%);
}
Обратите внимание на то, что значения у внутреннего clip-path: polygon должны быть немного меньше.
Решение через SVG
Другое решение с помощью SVG clip-path более предпочтительнее, т. к. работает в большинстве современных обозревателях сети. Вы можете SVG файл применить в качестве background для div, в котором будут ваши данные.
Комментариев нет:
Отправить комментарий