Schräge und abgewinkelte Ränder sowie Umrisse ⇐ CSS

[Guest]

Ich versuche, meinen Rand und meine Umrisse so aussehen zu lassen. Mein aktuelles Setup schneidet den einfachen Winkel oben rechts ab, scheint aber unten rechts nicht zu funktionieren. Außerdem werden Rand und Umriss nicht zusammengefügt, sondern der hellere Hintergrund angezeigt. Irgendwelche Ideen?

Code: Select all

html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
position: relative;
height: 100vh;
width: 100vw;
background-color: #6f6d6d;
border: 10px solid rgb(44, 43, 43);
clip-path: polygon(
0% 0%,
0% 100%,
calc(100% - 100px) 100%,
calc(100% - 30px) calc(100% - 100px),
100% calc(100% - 100px),
100% 50px,
calc(100% - 50px) 0%
);
}

body::after {
content: '';
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;

background-color: transparent;
border: 2px solid white;
;}

Code: Select all

Apollo

[![Bildbeschreibung hier eingeben][2]][2]