Блог

Главная - Вопросы по программированию - Пользовательские формы с помощью CSS, как создать форму яйца в CSS?

Пользовательские формы с помощью CSS, как создать форму яйца в CSS?

#html #css #svg #shapes

#HTML #css #svg #формы

Вопрос:

Я хочу создать эту пользовательскую форму белого цвета без значка корзины в css. Как я могу это сделать?

сильное описание изображения textenter здесь

Комментарии:

1. Вы должны предоставить код, но если вы еще не начали, на вашем месте я бы создал квадратный div с синим фоном. Затем в нем я создам еще один div с clip-path: polygon(); -webkit-clip-path: polygon(); , чтобы создать белую форму, которую вы хотите, а затем ваш зеленый значок корзины в нем.

Ответ №1:

Используйте радиус границы

Вот так

 border-radius:70% 30% 30% 70% / 60% 40% 60% 40%;

нравится изображение

введите описание изображения здесь

ДЕМОНСТРАЦИЯ

 .cart-div{
  background:#2c44a3;
  width:200px;
  height:200px;
  padding:50px;
}
.shape{
  background:#fff;
  width:180px;
  height:180px;
  color:#111;
  border-radius:58% 42% 63% 37% / 35% 31% 69% 65%;
  display:flex;
  align-items:center;
  justify-content:center;
}  
 <div class="cart-div">
  <div class="shape">
  cart icon
  </div>
</div>

Вы можете создавать разные формы? посетите здесь