html - 使用一个空的 div (<div/>) 和仅 css 创建特定元素

Question

例如，如果我想创建这个:

我该怎么办？

我知道如何将 div 标签与 css 绑定(bind)，但我的问题是我认为我对 css 的了解还不够多

Answer 1

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

<div class="abc">

</div>