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

Разбираемся в CSS
Ответить
Anonymous
 Наклонные и угловые границы плюс контуры

Сообщение 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»