Решение через 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>