Вопрос:

Кривая нижняя сторона div с внутренней стороны с CSS

html css css-shapes

2136 просмотра

2 ответа

123 Репутация автора

Я хотел бы изогнуть нижнюю сторону этого прямоугольника div / background с помощью CSS, так что результат будет примерно таким:

введите описание изображения здесь Может быть, у кого-то есть идея, как этого достичь?

.curved {
  margin: 0 auto;
  width: 800px;
  height: 500px;
  background: lightblue;
}
<div class="container">
  <div class="curved"></div>
</div>

Автор: DevJoe Источник Размещён: 04.01.2018 08:36

Ответы (2)


11 плюса

94419 Репутация автора

Решение

Просто используйте радиус границы и сделайте элемент переполненным . Вы также можете положиться на псевдоэлемент, чтобы избежать дополнительной разметки:

.container {
  margin: 0 auto;
  width: 500px;
  height: 200px;
  background: lightblue;
  position: relative;
  overflow: hidden;
}

.container:after {
  content: "";
  position: absolute;
  height: 80px;
  left: -10%;
  right: -10%;
  border-radius: 50%;
  bottom: -25px;
  background: #fff;
}
<div class="container">
</div>


Вы также можете использовать, radial-gradientесли вы хотите прозрачную форму:

body {
  background: pink;
}

.container {
  margin: 0 auto;
  width: 500px;
  height: 200px;
  background: radial-gradient(110% 50% at bottom, transparent 50%, lightblue 51%);
}
<div class="container">
</div>


А вот еще один способ использования clip-path(просто обратите внимание на поддержку браузера ):

.container {
  margin: 0 auto;
  width: 500px;
  height: 200px;
  background-color: lightblue;
  position: relative;
  overflow: hidden;
}

.container:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -5%;
  left: -5%;
  height: 120px;
  background: #fff;
  -webkit-clip-path: ellipse(50% 60% at 50% 100%);
  clip-path: ellipse(50% 60% at 50% 100%);
}
<div class="container">
</div>

Вы также можете рассмотреть SVG для этого:

.container {
  margin: 0 auto;
  width: 500px;
  height: 200px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='48' fill='lightblue'><path d='M0 0 L0 16 C16 6 48 6 64 16 L64 0 Z' /></svg>") top center/auto 700px no-repeat;
}
<div class="container">
</div>


Вот пример, если вы хотите также добавить рамку вокруг вашей фигуры:

.container {
  margin: 0 auto;
  width: 500px;
  height: 200px;
  border: 2px solid #000;
  border-bottom: 0;
  background: lightblue;
  position: relative;
  overflow: hidden;
}

.container:after {
  content: "";
  position: absolute;
  height: 80px;
  left: -10%;
  right: -10%;
  border-radius: 50%;
  bottom: -62px;
  background: #fff;
  z-index: 2;
}

.container:before {
  content: "";
  position: absolute;
  height: 82px;
  left: -10%;
  right: -10%;
  border-radius: 50%;
  bottom: -62px;
  background: #000;
  z-index: 1;
}
<div class="container">
</div>


Вы также можете иметь изображение или градиент в качестве фона с прозрачностью, если вы считаете mask-image:

body {
  background: pink;
}

.container {
  margin: 0 auto;
  width: 500px;
  height: 200px;
  -webkit-mask-image: radial-gradient(110% 50% at bottom, transparent 50%, #fff 51%);;
  mask-image: radial-gradient(110% 50% at bottom, transparent 50%, #fff 51%);;
  background: linear-gradient(45deg,red,yellow,blue);
}
<div class="container">
</div>

Автор: Temani Afif Размещён: 04.01.2018 08:40

4 плюса

1820 Репутация автора

Проверь это. Я создал это с: после псевдоэлемента. Это может быть полезно, если фон имеет сплошной цвет.

.curved {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  background: lightblue;
  position: relative;
}
.curved:after{
  background: white;
  position: absolute;
  content: "";
  left:0;
  right:0;
  bottom: -25px;
  height: 50px;
  border-radius: 50% 50% 0 0;
}
<div class="container">
  <div class="curved"></div>
</div>

Автор: Pons Purushothaman Размещён: 04.01.2018 08:45
Вопросы из категории :
32x32