我喜欢 build this icon (使用 Fontawesome)仅使用 CSS。什么是 CSS 的最佳实践?谢谢!
到目前为止,这是一个粗略的设计,但向您展示了如何单独使用 css 来实现这一点。
我还通过使用 vw
单位以及 %
单位以这种方式设计了它应该是可扩展的。
.circle {
height: 20vw;
width: 20vw;
background: green;
border: 10px solid lightgreen;
border-radius: 50%;
position: relative;
}
.square {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 40%;
width: 40%;
box-sizing: border-box;
border: 0.5vw solid white;
border-radius: 5px;
}
.square:before,
.square:after {
content: "";
position: absolute;
background: white;
}
.square:before {
height: 20%;
width: 40%;
top: 50%;
left: 20%;
border-radius: 5px 0 5px 5px;
transform: rotate(45deg);
z-index: 10;
}
.square:after {
height: 100%;
width: 20%;
top: -8%;
left: 70%;
border-radius: 10px 10px 10px 0;
transform: rotate(45deg);
border: 5px solid green;
border-bottom: none;
}
<div class="circle">
<div class="square"></div>
</div>
我是一名优秀的程序员,十分优秀!