如何使用css创建这些形状？

Question

我想在CSS中开发这样的设计。怎么做？

Answer 1

设计类似，你想要的。

.tear {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 10em;
  height: 10em;
  border: none;
  -webkit-border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0,0,0,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #1abc9c;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -webkit-transform: rotateX(-10.313240312354818deg) rotateY(-5.156620156177409deg) rotateZ(-32.0856365273261deg)   ;
  transform: rotateX(-10.313240312354818deg) rotateY(-5.156620156177409deg) rotateZ(-32.0856365273261deg)   ;
}

<div class="tear">Aditya</div>

Answer 2

要制作圆角，请使用border-radius，
要旋转元素，请使用transform: rotate()，
最好将其放在伪元素上，这样您就不必旋转父(45deg)和孩子(-45deg)。

＆＃13;

＆＃13;

.shape {
  width: 150px;
  height: 150px;
  position: relative;
}

.shape::before {
  content: "";
  width: 100%; height: 100%;
  position: absolute; top: 0; left: 0;
  
  border-radius: 50% 50% 50% 0;
  border: 1px solid;
  background-color: green;
  transform: rotate(-45deg);
}

.content {
  position: relative;
  z-index: 1; /* put bigger z-index than the pseudo element*/
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;