@kamisarlapsha

Как сделать такой блок?

Как сделать такой блок? Нижнюю часть понятно, можно через border-radius. Но как быть с верхней частью?

5e84acd7da8a4642520135.jpeg
  • Вопрос задан
  • 76 просмотров
Решения вопроса 1
sniggering_deus
@sniggering_deus Куратор тега CSS
I will live forever in the flame of your eyes.
Вариант первый - Clip-path:

<svg class="svg">
  <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
    <path d="M0.149,0.497 L0.894,0.012 C0.912,0,0.934,-0.002,0.953,0.005 C0.981,0.016,1,0.045,1,0.078 V0.594 L0.991,0.873 C0.99,0.911,0.974,0.947,0.947,0.971 C0.925,0.99,0.898,1,0.87,1 H0.112 C0.085,1,0.058,0.99,0.037,0.969 C0.014,0.946,0,0.913,0,0.878 V0.784 C0,0.666,0.057,0.558,0.149,0.497"></path>
  </clipPath>
</svg>

<div class="clipped"></div>


* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-color: #f6f6f6;
  margin: 0;
}

.svg {
  position: absolute;
  width: 0;
  height: 0;
}
.clipped {
  width: 350px;
  height: 350px;
  background: turquoise url(http://ewigkeit.ucoz.club/rose_wrapddd.jpg);
  background-size: cover;
  -webkit-clip-path: url(#my-clip-path);
  clip-path: url(#my-clip-path);
}


Вариант второй - SVG:

<svg class="svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 584 535">
  <path fill="brown" stroke="#FFF" stroke-width="5" d="M84.2934 275.278L519.564 9.05287c10.396-6.35843 23.107-7.68082 34.589-3.59833C570.249 11.1773 581 26.4107 581 43.4931V317l-4.934 147.206c-.678 20.206-10.04 39.136-25.687 51.938C537.847 526.398 522.153 532 505.961 532H67.9072c-16.0348 0-31.502-5.935-43.4206-16.662C10.8097 503.029 3 485.493 3 467.093v-46.8c0-59.195 30.7946-114.128 81.2934-145.015z" />
</svg>


* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-color: #252525;
  margin: 0;
}

.svg {
  width: 350px;
  height: 350px;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы