Скругленная фигура css

209

05 января 2019, 00:40

как это сделать, и чтобы можно было вставить в блок и растягивать по ширине

Answer 1

Конечно легче всего это использовать SVG, но можно так же побалываться свойством border-radius: https://codepen.io/anon/pen/yxZYBZ

Как пример для Вашего случая:

border-radius: 600px / 100px 0 0 0;

Answer 2

С помощью svg – рисуем прямоугольник с кривой безье:

<svg height="400" width="400">
   <path d="M 0 200, q 200 -50 400 -50, L 400 400, 0 400, 0 200" fill="white" />
</svg>

Прогоняем его через конвертер для экранизации в background: url() и вставляем:

body { 
  background: aquamarine 
} 
 
.intro { 
  width: 70vw; 
  min-height: 70vw; 
  margin: 0 auto; 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='400' width='400'%3E%3Cpath d='M 0 200, q 200 -50, 400 -50, L 400 400, 0 400, 0 200' fill='white' /%3E%3C/svg%3E"); 
  background-size: cover; 
  background-position: bottom center; 
}

<div class="intro"></div>

С посощью border-radius:

body { 
  background: aquamarine 
} 
 
.intro { 
  width: 70vw; 
  min-height: 70vw; 
  margin: 0 auto; 
  position: relative; 
  overflow: hidden; 
} 
 
.intro:before { 
  content: ''; 
  display: block; 
  width: 340vh; 
  height: 340vh; 
  min-width: 2000px; 
  min-height: 2000px; 
  border-radius: 50%; 
  background: white; 
  position: absolute; 
  top: 30%; 
  right: 0; 
  transform: translateX(50%); 
}