Наклонные и угловые границы плюс контуры ⇐ Html

[Anonymous]

Я пытаюсь, чтобы моя граница и контуры выглядели вот так. Моя текущая настройка обрезает простой угол в правом верхнем углу, но, похоже, не работает в правом нижнем углу. Кроме того, граница и контур не соединяются, вместо этого отображается более светлый фон. Есть идеи?

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

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

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

Apollo

[![введите описание изображения][2]][2]

Подробнее здесь: https://stackoverflow.com/questions/793 ... s-outlines