使用 CSS 自定义形状，如何在 CSS 中创建蛋形？

Question

我想在 css 中创建这个没有购物车图标的自定义白色形状。我该怎么做？

Answer 1

使用边框半径

像这样

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

赞图片

enter image description here

演示

.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>

你能做出不同的形状吗？访问 here

使用 CSS 自定义形状，如何在 CSS 中创建蛋形？

Custom shapes using CSS, How to create an egg shape in CSS?

html

css

svg

shapes