div+css实现各种形状（精⼼整理）
1.正⽅形
.div {width: 100px;height: 100px;background: red;}
2.矩形
.div {width: 200px;height: 100px;background: red;}
3.圆形
.div {width: 100px;height: 100px;background: red;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;}
4.椭圆
.div {width: 200px;height: 100px;background: red;-moz-border-radius: 100px / 50px;-webkit-border-radius: 100px / 50px;border-radius: 100px / 50px;}
5.上三⾓
.div {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;}
6.下三⾓
.div {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid red;}
7.左三⾓
.div {width: 0;height: 0;border-top: 50px solid transparent;border-right: 100px solid red;border-bottom: 50px solid transparent;}
8.右三⾓
.div {width: 0;height: 0;border-top: 50px solid transparent;border-left: 100px solid red;border-bottom: 50px solid transparent;}
9.三⾓形左上
.div {width: 0;height: 0;border-top: 100px solid red;border-right: 100px solid transparent;}
10.三⾓形右上
.div {width: 0;height: 0;border-top: 100px solid red;border-left: 100px solid transparent;}
11.三⾓形左下
.div {width: 0;height: 0;border-bottom: 100px solid red;border-right: 100px solid transparent;}
12.三⾓形右下
.div {width: 0;height: 0;border-bottom: 100px solid red;border-left: 100px solid transparent;}
13.弯尾箭头
.
div { position: relative; width: 0; height: 0; border-top: 9px solid transparent; border-right: 9px solid red; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg);}
.div:after { content: ""; position: absolute; border: 0 solid transparent; border-top: 3px solid red; border-radius: 20px 0 0 0;top: -12px; left: -
9px; width: 12px; height: 12px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);}
14.梯形
.div {border-bottom: 100px solid red;border-left: 50px solid transparent;border-right: 50px solid transparent;height: 0;width: 100px;}
15.平⾏四边形
.div {width: 150px;height: 100px;-webkit-transform: skew(20deg);-moz-transform: skew(20deg);-o-transform: skew(20deg);background: red;} 16.六⾓星
.div {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;position: relative;}
.div:after {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid red;position: absolute;content: "";top: 30px;left: -50px;}
17.五⾓星
.div { margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -moz-transform: rotate(35deg);-webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform:rotate(35deg);}
.div:before { border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px;left: -65px;display: block;content: ''; -webkit-transform: rotate(-35deg);-moz-transform: rotate(-35deg); -ms-transform:rotate(-35deg);-o-transform:rotate(-35deg);}
.div:after { position: absolute; display: block; color: red; top: 3px; left: -105px;width: 0px;height: 0px;border-right:100px solid transparent;
border-bottom:70px solid red;border-left: 100px solid transparent;-webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg);-o-transform: rotate(-70deg);content: '';}
18，桃⼼
.div {position: relative;width: 100px;height: 90px;}
.div: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%;}
.div:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rot
ate(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%;}
19.⽆限符号
.div {position: relative; width: 212px; height: 100px;}
.div:before,.div:after {content: ""; position: absolute; top: 0; left: 0; width: 60px;height: 60px;border: 20px solid red; -moz-border-radius: 50px 50px 0 50px;border-radius: 50px 50px 0 50px;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-
45deg); -o-transform: rotate(-45deg);transform: rotate(-45deg);}
.div:after { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0;border-radius: 50px 50px 50px 0; -
webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
20.⽓泡聊天
.div {width: 120px; height: 80px;background: red;position: relative;-moz-border-radius:10px; -webkit-border-radius: 10px;border-radius:
10px;}
.div:before {content:"";position: absolute;right: 100%;top: 26px;width: 0; height: 0;border-top: 13px solid transparent; border-right: 26px solid red;border-bottom: 13px solid transparent;}
21.搜索符号
.div{ font-size: 10em; /* This controls the size. */ display: inline-block; width: 0.4em; height: 0.4em; border: 0.1em solid red; position: relative; border-radius: 0.35em;}
.div::before{ content: ""; display: inline-block; position: absolute; right: -0.25em; bottom: -0.1em; border-width: 0; background: red; width: 0.35em; height: 0.08em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform:
rotate(45deg);}
22.锥形
div border属性.div {width: 0;height: 0;border-left: 70px solid transparent;border-right: 70px solid transparent;border-top: 100px solid red; -moz-border-radius: 50%; -webkit-border-radius: 50%;border-radius: 50%;}
23.⽉亮
.div { width: 80px;height: 80px;border-radius: 50%;box-shadow: 15px 15px 0 0 red;}
24.⼗字架
.div {background: red;height: 100px;position: relative;width: 20px;}
.div:after { background: red;content: "";height: 20px;left: -40px;position: absolute;top:40px;width: 100px;}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论