您现在的位置是：网站首页> 编程资料编程资料
纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）_CSS教程_CSS_网页制作_
2021-09-07
903人已围观
简介 今天在css-tricks上看到一篇文章，那篇文章让我不禁心头一震，强大的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 {
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;
}
6、下三角
最终效果：
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;
height: 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、梯形
最终效果：
CSS代码如下：
复制代码
代码如下:#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent
相关内容
- CSS3属性box-shadow使用详细教程_css3_CSS_网页制作_
- 兼容IE与firefox的css 线性渐变（linear-gradient）_CSS教程_CSS_网页制作_
- CSS模拟小箭头的实现代码_CSS教程_CSS_网页制作_
- CSS图片垂直居中方法整理集合 ！(常见问题解答)_CSS教程_CSS_网页制作_
- CSS图片垂直居中实现方法详解 _CSS教程_CSS_网页制作_
- 推荐14款非常有用的 CSS 网格系统生成工具 _CSS布局实例_CSS_网页制作_
- 那些不常用却很有的CSS小结_CSS教程_CSS_网页制作_
- 分享CSS3中必须要知道的10个顶级命令_css3_CSS_网页制作_
- CSS3结构性伪类选择器九种写法_css3_CSS_网页制作_
- 四种css 伪类选择器_CSS教程_CSS_网页制作_
点击排行
本栏推荐
