Как сверстать нестандартный блок

Question

Как сверстать нестандартный блок

Рейтинг: 0Ответов: 2Опубликовано: 02.04.2023

Какими способами можно сверстать каплю снизу блока чтобы в ней был background-image блока? Интересует несколько возможных решений

css html вёрстка

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Мужик, смотри. Увидел, что ты уже с этим мучался).

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: linear-gradient(red, blue);
  background-size: cover;
}

svg {
  z-index: 2;
  position: relative;
  width: 800px;
  height: 400px;
}

.gg {
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 300px;
  background-color: blue;
  bottom: 0;
}

<body>
  <svg class="img">
    <mask id="circle">
      <rect fill="white" cx="100" cy="100" width="800" height="300"></rect>
      <circle fill="white" cx="400" cy="300" r="100"></circle>
    </mask>
    <g mask="url(#circle)">
      <image x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"
xlink:href="https://i.pinimg.com/originals/03/70/7d/03707d2f5d16d6b4d5dabcba04843003.jpg"
></image>
    </g>
  </svg>
  <div class="gg"></div>
</body>

Смысл такой: берем контейнер SVG, в него помещаем mask с айди, на который мы будем ссылаться в нашей картинке. Помещаем 2 объекта rect - прямоугольник, circle - круг. Размещаем их по осям x, y и выставляем им размеры. Далее в <g> ставим нашу картинку. Для наглядности создал еще один див.

Может быть я и плохо объяснил, может быть не точь-в-точь как в твоем примере, Но получился отдельный блок необычной формы. От сюда можно уже плясать.

Answer 2

▲ 3

Есть вот такой вариант с вёрсткой волны при помощи clip-path. Не точь в точь, но как альтернативный вариант:

    <style>
    .container {
     width: 400px;
     height: 300px;
     position: relative;
     margin: auto;
     background-image: url("https://i.pinimg.com/originals/03/70/7d/03707d2f5d16d6b4d5dabcba04843003.jpg");
     background-position: center; 
     background-size: cover;
     background-repeat: no-repeat;
     }
     .wave {
     width: 400px;
     height: 100px;
     background: white;
     clip-path: polygon(100% 100%, 0% 100% , 0.00% 0.00%, 2.50% 0.55%, 5.00% 2.20%, 7.50% 4.90%, 10.00% 8.59%, 12.50% 13.18%, 15.00% 18.55%, 17.50% 24.57%, 20.00% 31.09%, 22.50% 37.96%, 25.00% 45.00%, 27.50% 52.04%, 30.00% 58.91%, 32.50% 65.43%, 35.00% 71.45%, 37.50% 76.82%, 40.00% 81.41%, 42.50% 85.10%, 45.00% 87.80%, 47.50% 89.45%, 50.00% 90.00%, 52.50% 89.45%, 55.00% 87.80%, 57.50% 85.10%, 60.00% 81.41%, 62.50% 76.82%, 65.00% 71.45%, 67.50% 65.43%, 70.00% 58.91%, 72.50% 52.04%, 75.00% 45.00%, 77.50% 37.96%, 80.00% 31.09%, 82.50% 24.57%, 85.00% 18.55%, 87.50% 13.18%, 90.00% 8.59%, 92.50% 4.90%, 95.00% 2.20%, 97.50% 0.55%, 100.00% 0.00%);
     position: absolute;
     bottom: 0;
     }
     </style>
     <div class="container">
     <div class="wave"></div>
     </div>

Как сверстать нестандартный блок

Ответы