Страницы

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

пятница, 28 февраля 2020 г.

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

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

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

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