4

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

1 ответ 1

5

Решение через 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%);
}
<div class="card-border">
    <div class="card"></div>
</div>

Обратите внимание на то, что значения у внутреннего clip-path: polygon должны быть немного меньше.

Решение через SVG:

Другое решение с помощью SVG clip-path более предпочтительнее, т. к. работает в большинстве современных обозревателях сети. Вы можете SVG файл применить в качестве background для div, в котором будут ваши данные.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="320" height="480">
<defs>
    <clipPath id="cp">
        <polygon points="45,0 320,0 320,480 0,480 0,48"/>
    </clipPath>
</defs>
<g stroke="#2ea8e6" stroke-width="4">
    <rect x="2" y="2" rx="14" clip-path="url(#cp)" width="316" height="476" fill="#f2f2f2"/>
    <line x1="2" y1="48" x2="45" y2="2"/>
</g>
</svg>

3
  • @Dmitry, вас мой ответ не устраивает? Почему нет отклика?
    – Bharatha
    Commented 4 июн. 2018 в 6:00
  • картинку добавьте для обрезки вместо серого прямоугольника, тогда может автор откликнется. От меня (+) Commented 4 июн. 2018 в 13:57
  • Спасибо большое. Сделал через before
    – Dmitry
    Commented 6 июн. 2018 в 10:00

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.