css图标代码怎么写，使⽤css做图标（⽰例代码）⾸先原理是：
请⼀步⼀步粘贴代码，慢慢品味。其实，很简单。。。
1.⾸先三⾓形的前⾝是⼀个普通的矩形-正⽅形||长⽅形？ok！
.box{
border:80px solid red;
}
没错，使⽤边框属性，我们得到了⼀个长⽅形。
然后，我们弄些三⾓出来。
.box{
width:0;
border:80px solid transparent;
border-left:100px solid black;
}
你i想要哪个⽅向的三⾓，就在border上取哪个⽅向的就可以了。
原理：
每⼀个对⾓是⼀个三⾓形。
盒模型默认宽是100%；所以要归0；
boredr为透明，⽅便我们只给所需要⽅向的三⾓着⾊。
基于这个原理，在做⼀些复杂的时候，我们可以配合伪类元素⽣成。下⾯是⼀些好玩⼜简单的代码⽰例。
1.1旗帜：
.flag {
width: 0;
height: 0;
border: 20px solid #FF6600;
border-top-width: 40px;
border-bottom-color: transparent;
border-bottom-width: 20px;
}
1.2复杂的丝带~
(虽然丑……但是技术才是重点)
.ribbon {
margin:auto;
height: 3rem;
padding: 0.7rem 0;
font-size: 1.6rem !important;
color: #fff;
text-align: center;
background: red;
box-shadow:1px 1px 0 rgba(255, 233, 200, 0.5); }
.ribbon:before,
.ribbon:after {
content: "";
position: absolute;
display: block;
bottom: -0.6rem;
border: 1.5rem solid gold;
z-index: -1;
}
.ribbon:before {
left: -2.4rem;
border-right-width: 1.5rem;
border-left-color: transparent;
box-shadow: 1px 1px 0 rgba(176, 102, 166, 0.8); }
.ribbon:after {
right: -2.4rem;
border-left-width: 1.5rem;
border-right-color: transparent;
box-shadow: 0 1px 0 rgba(176, 102, 166, 0.8);
}
.ribbon .ribbon-content:before,
.ribbon .ribbon-content:after {
content: "";
border-style: solid;
border-color: #bf004c transparent transparent transparent; bottom: -0.6rem;
}
.borderbox
ribbon .ribbon-content:before {
left: 1px;
border-width: 0.6rem 0 0 0.6rem;
}
.ribbon .ribbon-content:after {
right: 0;
border-width: 0.6rem 0.6rem 0 0;
}
⾦卡会员

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