我可以用css做出不同的形状吗？

Question

我可以用css制作这个形状吗？

＆＃13;

＆＃13;

.shape {
  margin: 40px;
  height: 40px;
  width: 100px;
  border-radius: 50px;
  background: #333;
  position: relative;
}


.shape:before {
  height: 80px;
  width: 80px;
  border-radius: 100%;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #333;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这就是你要找的东西

.shape {
  margin: 40px;
  height: 40px;
  width: 110px;
  border-radius: 50px;
  background: #333;
  position: relative;
}

.shape:before {
  height: 80px;
  width: 80px;
  border-radius: 100%;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #333;
}

.shape:after {
  height: 40px;
  width: 121px;
  border-radius: 90%;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #333;
}

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

Answer 2

所以，你有三个组件，你已经使用普通的CSS和其他（circle）使用before选择器。现在，使用after选择器创建第三个组件。

＆＃13;

＆＃13;

.shape {
  margin: 40px;
  height: 40px;
  width: 155px;
  border-radius: 50px;
  background: #333;
  position: relative;
}
.shape:after {
  height: 55px;
  width: 135px;
  border-radius: 20px;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #333;
}

.shape:before {
  height: 100px;
  width: 100px;
  border-radius: 100%;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #333;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

此代码可能会对您有所帮助。

这是CSS。

*
{
    margin: 0px;
    padding: 0px;
}
 .circle
{
    position: relative;
    height: 300px;
    background: #000;
    border-radius: 50%;
    border-color: #000;
    position: absolute;
    top: 50px;
    left:100px;
}
.top
{
    width: 358px;
    height: 115px;
    background: #000;
    border-radius: 54px;
    position: absolute;
    top:86px;
    left: -28px;
}
.hor
{
    width: 400px;
    height: 50px;
    background: #000;
    border-radius: 50px;
    position: absolute;
    top:117px;
    left:-50px;
}

这是相应的HTML。

<div class="page">
<div class="circle">
    <div class="top"></div>
    <div class="hor"></div>
</div></div>