Wie erstelle ich einen Rand mit einem Quadrat an den Ecken? ⇐ HTML

[Anonymous]

Wie erstelle ich einen Rand mit quadratischen Ecken? Und eine der Grenzen durchbrechen. Wie auf dem Bild.


< /p>

Ich habe es mit vier zusätzlichen Blöcken gemacht, aber ich denke, es gibt vielleicht einen besseren Weg. Und ich weiß nicht, wie ich die äußere Grenze durchbrechen soll.

Code: Select all

: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);
}

Code: Select all

qwerty