Здравствуйте. У блока левый верхний угол 45 градусов, сделал svg с clipPath, но не удается сделать обводку для этого угла. Подскажите как сделать обводку без швов.
html,
body {
margin: 0;
width: 100%;
}
body {
background: url(https://arti911.github.io/assets/images/nyamushka/bg.jpg) no-repeat center / cover;
overflow-y: scroll;
padding: 10px;
}
Ответ
Вариант с псевдоэлементом:
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.block {
margin-top: 15px;
position: relative;
background-color: dodgerblue;
width: 200px;
height: 200px;
border-radius: 15px;
-webkit-clip-path: polygon(16% 0, 100% 0, 100% 100%, 50% 100%, 0 100%, 0 16%);
clip-path: polygon(16% 0, 100% 0, 100% 100%, 50% 100%, 0 100%, 0 16%);
}
.block::before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 190px;
height: 190px;
border-radius: 15px;
background-color: #fff;
-webkit-clip-path: polygon(16% 0, 100% 0, 100% 100%, 50% 100%, 0 100%, 0 16%);
clip-path: polygon(16% 0, 100% 0, 100% 100%, 50% 100%, 0 100%, 0 16%);
}
Комментариев нет:
Отправить комментарий