本文整理了使用CSS实现的20种不同图形，包括正方形、长方形、各种三角形、平行四边形、梯形、六角星、五角星、五边形、六边形、桃心、无限大符号、蛋形、提示对话框、十二角星、八角星、钻石和八卦等，适合开发者提升CSS技能。
一共收集整理了图形20个，比较实用，同时也为了熟悉CSS的代码。整合了一下，有错误欢迎指出。
1.正方形
#square {
width: 100px;
height: 100px;
background: red;
}
2.长方形
#rectangle {
width: 200px;
height: 100px;
background: red;
}
3.左上三角
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
4.右上三角
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
5.左下三角
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
6.右下三角
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
7.平行四边形
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
}
8.梯形
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
9.六角星
最低0.47元/天 解锁文章
810
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
