纯CSS绘制爱心与八卦
本文介绍如何仅使用CSS来绘制爱心和八卦图案。通过巧妙地利用伪元素、旋转和平滑边角属性，实现这些复杂形状的绘制。适用于前端开发者学习CSS技巧。
效果：
CSS代码如下：
#square{ width: 100px; height: 100px; background: red;}
纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等），NB么
代码及使用：
<!example.html>
<html>
<head>
</head>
<body>
<style type="text/css">
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
</style>
<div id="heart"></div><br></br>
<div id="yin-yang"></div><br></br>
</body>
</html>
详细CSS代码见下方的该网页源代码部分！！！
扫一扫
133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
