Как я могу получить любую нестандартную форму с помощью свойства css clip-path?

Question

Я пытаюсь получить форму, используя свойство многоугольника clip-path, но оно не работает должным образом, форма, которую я хочу создать, приведена ниже.

Я пробовал следующий код, но он дает углам не круглую форму.

.box {
  height: 95vh;
  background: linear-gradient(110deg, #2186eb, #37dce2);
  clip-path: polygon(0 0,0 30%, 50% 100%, 100% 30%,100% 0);
  -webkit-mask:
    linear-gradient(#fff,#fff) top/100% 70% no-repeat,
    radial-gradient(44% 100% at top,#fff 86%,transparent 86.5%);
}


body {
  margin:0;
  background:pink;
}

<div class="box">

</div>

_{Свободный перевод вопроса How can I obtain any custom shape using clip-path css propery? от участника @Hasnain Ali.}

Answer 1

У вас не получится закруглений с многоугольником. Вы можете рассмотреть маску с радиальным градиентом для кривизны в дополнение к clip-path:

.box {
  height: 95vh;
  background: linear-gradient(110deg, #2186eb, #37dce2);
  clip-path: polygon(0 0,0 30%, 50% 100%, 100% 30%,100% 0);
  -webkit-mask:
    linear-gradient(#fff,#fff) top/100% 70% no-repeat,
    radial-gradient(44% 100% at top,#fff 86%,transparent 86.5%);
}


body {
  margin:0;
  background:pink;
}

<div class="box">

</div>

Другая идея с использованием border-radius и трансформации:

.box {
  height: 95vh;
  position:relative;
  overflow:hidden;
}
.box::before {
  content:"";
  position:absolute;
  width:100vmax;
  height:100vmax;
  top:50%;
  left:50%;
  transform:translate(-50%,-100%) rotate(45deg);
  border-bottom-right-radius:100px;
  background: linear-gradient(75deg, #2186eb, #37dce2);
}


body {
  margin:0;
  background:pink;
}

<div class="box">

</div>

_{Свободный перевод ответа от участника @Temani Afif.}

Answer 2

Решение SVG

Используем clipPath

Поддержка svg clipPath очень хорошая

В отличии от вариантов решения CSS не меняется форма границы при изменении размеров окна браузера

body {
margin:0;
padding:0;
background-image:url(https://i.stack.imgur.com/Nlhed.jpg);
background-repeat: no-repeat;
background-size:cover;
}
.container {
width:100vw;
height:100vh;
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 758 474" preserveAspectRatio="xMinYMin meet" style="border:0px solid red;" >
<defs> 
<clipPath id="cp">     
   <path   d="m0 0 760.2-1v227c0 0-208.4 132.8-319.3 196.8-11.6 6.7-24.9 10.6-38.2 13.1-10.9 2-22.1 1.9-33.1 1-10.9-0.8-23-3-32.1-6C320.5 425.2-1 223.9-1 223.9Z"/>
</clipPath>
</defs>
<image clip-path="url(#cp)" xlink:href="https://i.stack.imgur.com/iCkE2.png" width="100%" height="100%" />  
</svg>

Вариант анимации

Изображение выезжает после клика, при повторном клике убирается обратно

var clip = document.getElementById("svg1"), 
   forward = document.getElementById("forward"),
   back = document.getElementById("back") 
    let flag = true;
 clip.addEventListener('click', function() {
  if (flag == true) {
    forward.beginElement();
    flag = false;
  } else {
    back.beginElement();
    flag = true;
  }
});

body {
margin:0;
padding:0;
background-image:url(https://i.stack.imgur.com/Nlhed.jpg);
background-repeat: no-repeat;
background-size:cover;
}
.container {
width:100vw;
height:100vh;
}

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 758 474" preserveAspectRatio="xMinYMin meet" style="border:0px solid red;" >
<defs> 
<clipPath id="cp">     
   <path   transform="translate(0,-400)" d="m0 0 760.2-1v227c0 0-208.4 132.8-319.3 196.8-11.6 6.7-24.9 10.6-38.2 13.1-10.9 2-22.1 1.9-33.1 1-10.9-0.8-23-3-32.1-6C320.5 425.2-1 223.9-1 223.9Z"> 
      <animateTransform id="forward"  attributeName="transform" type="translate" begin="indefinite" dur="3s" values="0 -400;0,0" fill="freeze" />    
        <animateTransform id="back"  attributeName="transform" type="translate" begin="indefinite" dur="3s" values="0,0;0,-400" fill="freeze" />      
   </path>
</clipPath>
</defs>
<image   clip-path="url(#cp)" xlink:href="https://i.stack.imgur.com/iCkE2.png" width="100%" height="100%" />  

</svg>

БЛОГ НА HUSL

Как я могу получить любую нестандартную форму с помощью свойства css clip-path?

Ответы (2 шт):

Решение SVG

Вариант анимации