Страницы

Поиск по вопросам

вторник, 6 ноября 2018 г.

Как плавно сделать обводку обрезанного svg?

Здравствуйте. У блока левый верхний угол 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%); }


Комментариев нет:

Отправить комментарий