Как генерировать формы CSS3

Question

У меня есть форма в моих слоях фотошопа, я прикрепляю изображение этой формы. Напишите пожалуйста, как сгенерировать его из CSS3.

Answer 1

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

.container{width:300px;
height:500px;
background:#ccc;
position:relative}

.circle{width:300px;
height:540px; background:#fff;
position:absolute;
left:52%;
top:-10px;
border-radius:100%
}

<div class="container">
<div class="circle"></div>
</div>

Answer 2

.img-shape {ширина: 367 пикселей; высота: 623 пикселей; цвет фона: #bababa; Дисплей: блок; поле слева: 50 пикселей; положение: относительное; z-index: 2;} .img-shape: after {content: ""; ширина: 562 пикселей; высота: 840 пикселей; цвет фона: #FFFFFF; положение: абсолютное; верх: -108 пикселей; справа: -470 пикселей; радиус границы: 50%; z-индекс: 3;}

Answer 3

Вы можете использовать css: after effect

<div class="shape"></div>

.shape {
width: 100px; height: 100px;
line-height: 100px;
background-color: #fc0;
display: inline-block;
margin-left: 50px;
position: relative;
z-index: 2;
text-decoration: none;}

.shape:after {
content: "";
width: 100px; height: 100px;
background-color: #fff;
position: absolute;
top: 0; right: -50px;
border-radius: 50%;
z-index: 3;}