纯CSS画的基本图形（矩形、圆形、三⾓形、多边形、爱
⼼、⼋卦等）
图形包括基本的矩形、圆形、椭圆、三⾓形、多边形，也包括稍微复杂⼀点的爱⼼、钻⽯、阴阳⼋卦等。当然有⼀些需要⽤到CSS3的属性，所以在你打开这篇⽂章的时候，我希望你⽤的是firefox或者chrome，当然IE也能看⼀部分的。那好，下⾯就⼀起来看看我们是如何⽤纯CSS来画这些图形的，如果你也觉得很震撼，推荐给你的朋友吧。
1、正⽅形
最终效果：
CSS代码如下：
复制代码
代码如下:
#square {
width: 100px;
height: 100px;
background: red;
}
2、长⽅形
最终效果：
CSS代码如下：
复制代码
代码如下:
#rectangle {
width: 200px;
height: 100px;
background: red;
}
3、圆形
最终效果：
CSS代码如下：
代码如下:
#circle {
absolute relative
width: 100px;
height: 100px;
background: red;
-
moz-border-radius: 50px;
-webkit-border-radius: 50px; border-radius: 50px;
}
4、椭圆
最终效果：
CSS代码如下：
复制代码
代码如下:
#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px;
}
5、上三⾓
最终效果：
CSS代码如下：
复制代码
代码如下:
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;
}
最终效果：
CSS代码如下：
复制代码
代码如下:
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red;
}
7、左三⾓
最终效果：
CSS代码如下：
复制代码
代码如下:
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; }
8、右三⾓
最终效果：
CSS代码如下：
复制代码
代码如下:
#triangle-right {
width: 0;
border-top: 50px solid transparent; border-left: 100px solid red;
border-bottom: 50px solid transparent; }
9、左上三⾓
最终效果：
CSS代码如下：
复制代码
代码如下:
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent; }
10、右上三⾓
最终效果：
CSS代码如下：
复制代码
代码如下:
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent; }
11、左下三⾓
最终效果：
CSS代码如下：
复制代码
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red; border-right: 100px solid transparent; }
12、右下三⾓
最终效果：
CSS代码如下：
复制代码
代码如下:
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red; border-left: 100px solid transparent; }
13、平⾏四边形
最终效果：
CSS代码如下：
复制代码
代码如下:
#parallelogram {
width: 150px;
height: 100px;
margin-left:20px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-
o-transform: skew(20deg); background: red;
}
14、梯形
最终效果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。