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

#html #css #css3 #svg #clip_path

Необходимо карточке, с 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%);
}

    

Ответы

Ответ 1

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