Как мне разрезать один край блока и вокруг него? ⇐ CSS

[Anonymous]

Люди! Один - с границей, второй - с фоном. Edge выглядит так:

Я пробовал разные подходы, и ни один из них не позволяет достичь точно такого вида формы. Просто прямой и острый. < /P>
, а также не будет работать с границей. И это важно. < /P>

Код: Выделить всё

clip-path: polygon(0 0, 100% 0, 100% 30%, 100% 92%, 93% 100%, 30% 100%, 0 100%, 0% 30%);
< /code>
Кроме того, я не могу достичь падения (в фрагменте, проведенном вторым блоком, и вы увидите мой подход, с масштабированным позиционированным блоком, который играет роль границы, но это грязно, а не просто гладкая граница 1PX. Цели? />

.cutted-border {
height: 150px;
width: 250px;
border-radius: 8px;
border: 1px solid #000;
clip-path: polygon(0 0, 100% 0, 100% 30%, 100% 92%, 93% 100%, 30% 100%, 0 100%, 0% 30%);
}

.cutted-bg {
height: 150px;
width: 250px;
position: relative;
display: flex;
}

.cutted-bg .in {
border-radius: 8px;
clip-path: polygon(0 0, 100% 0, 100% 30%, 100% 92%, 93% 100%, 30% 100%, 0 100%, 0% 30%);
background: #000;
height: 100%;
width: 100%;
}

.cutted-bg .out {
position: absolute;
top: -2px;
left: -2px;
width: calc(100% + 4px);
height: calc(100% + 4px);
background: #C9961A;
border-radius: 9px;
clip-path: polygon(0 0, 100% 0, 100% 30%, 100% 92%, 93% 100%, 30% 100%, 0 100%, 0% 30%);
z-index: -1;
opacity: 0;
transition: .25s;
}

.cutted-bg:hover .out {
opacity: 1;
transition: .25s;
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/797 ... d-round-it