创建具有一个空div（<div>）和仅css

Question

例如，如果我想创建它：

我该怎么办？

我知道如何将div标签与css绑定，但我的问题是我认为我不知道css，因为我应该这样做

Answer 1

＆＃13;

＆＃13;

.abc {
  width: 100px;
  height: 85px;
  background-color: black;
  border-radius: 0 0 10px 10px;
  margin: 0 20px;
  position: relative;
}

.abc::before {
  content: " ";
  position: absolute;
  width: 140px;
  height: 20px;
  background-color: black;
  border-radius: 0 0 10px 10px;
  margin-top: 5px;
  bottom: -25px;
  left: -20px;
}

.abc::after {
  content: " ";
  position: absolute;
  width: 23px;
  height: 35px;
  top: 0;
  right: -30px;
  border-radius: 0 30px 30px 0;
  border: 13px solid black;
  border-left: 0;
}

＆＃13;

<div class="abc">

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

以下是一个 div和没有伪元素 的示例（还有一些动画）

＆＃13;

＆＃13;

.coffee {
  width:300px;
  height:170px;
  margin-top:10px;
  border-radius:0 0 30px 30px;
  background:
  radial-gradient(circle at left,#fff 52%,transparent 53%) 225px 20px/50px 60px,
  radial-gradient(circle at left,#000 52%,transparent 53%) 225px 0px/80px 100px,
  radial-gradient(circle at top left,#000 70%,transparent 71%) 205px 120px/20px 20px,
  radial-gradient(circle at top right,#000 70%,transparent 71%) 75px 120px/20px 20px,
  linear-gradient(#000,#000) center 120px /calc(50% - 40px) 20px,
  linear-gradient(#000,#000) top center/50% 120px,
  linear-gradient(#000,#000) bottom/100% 30px;
  
  background-repeat:no-repeat;
  transition:0.3s all linear;
}
.coffee:hover {
  height:180px;
  margin-top:0px;
}

＆＃13;

<div class="coffee"></div>

＆＃13;

＆＃13;

＆＃13;