Как сделать границу с квадратами по углам? ⇐ CSS

[Anonymous]

Как сделать рамку с квадратами по углам? И сломать одну из границ. Поставьте лайк на изображении.


< /p>

Я сделал это с четырьмя дополнительными блоками, но думаю, есть способ получше. И я не знаю, как выйти за внешнюю границу.

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

:root {
--size: 8px;
--r: -3px;
}

.wrapper {
position: relative;
border: 1px solid black;
margin: 25px auto;
padding: 2px;
width: max-content;
}

.inner {
padding: 15px 25px;
border: 1px solid black;
}

.conner {
position: absolute;
height: var(--size);
width: var(--size);
background-color: black;
}

.bottom {
bottom: var(--r);
}

.right {
right: var(--r);
}

.top {
top: var(--r);
}

.left {
left: var(--r);
}

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

qwerty

Подробнее здесь: https://stackoverflow.com/questions/616 ... on-corners