使用纯CSS布局如何实现一个带有“王”字的设计?

18 min read

以下是使用纯CSS布局的一个“王”字:

.outer {
   font-size: 40px;
   height: 80px;
   width: 80px;
   position: relative;
}

.outer:before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 0;
   height: 0;
   border-top: 40px solid black;
   border-right: 20px solid transparent;
   border-bottom: 40px solid black;
   border-left: 20px solid transparent;
}

.outer:after {
   content: "";
   position: absolute;
   top: 40px;
   left: 0;
   width: 0;
   height: 0;
   border-top: 40px solid black;
   border-right: 40px solid transparent;
   border-bottom: 0px solid transparent;
   border-left: 40px solid transparent;
}

您可以将此代码添加到HTML页面中并使用“outer”类来包含该形状。