Programmiererforum

: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

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

[img]https://i.sstatic.net/U4kbN.png[/img]
< /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]: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]
[code]
qwerty

[/code]