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

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





    

Ответы

Ответ 1

Вариант с псевдоэлементом:



* {
  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%);
}



Ответ 2

Пацаны все готово



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