Страницы

Поиск по вопросам

четверг, 16 мая 2019 г.

Как сделать скошенный угол у прямоугольника?

Необходимо карточке, с 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, в котором будут ваши данные.

Комментариев нет:

Отправить комментарий