CSS3绘制各种形状二
2019-05-29 本文已影响0人
蓝Sir_
现在的CSS功能非常强大了，特别是CSS3的属性，例如转换属性，过渡属性，动画属性，能做的效果非常多。在网页开发中，会经常遇到一些小符号或者形状，在以前就只能通过切图来实现，切图这种方式是用起来方便，但是会增加请求。而现在浏览器对CSS3的兼容基本没有什么问题，所以在网页开发的时候遇到符号或者形状，能写的都是用CSS来书写了。
而这篇文章就是收集了各种通过CSS书写的形状，在开发的时候可以快速应用。例如：椭圆，三角形，梯形，多边形，五角星，多角星，等等...
文章中涉及到的重要属性有：border，transform，gradient，伪元素，border-radius等，这些都是比较常用的属性，但是通过不同的组合，可以构建出不同的形状。
无限循环图标
#infinity {
position: relative;
width: 212px;
height: 100px;
box-sizing: content-box;
}
#infinity:before,
#infinity:after {
content: "";
box-sizing: content-box;
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid red;
border-radius: 50px 50px 0 50px;
transform: rotate(-45deg);
}
#infinity:after {
left: auto;
right: 0;
border-radius: 50px 50px 50px 0;
transform: rotate(45deg);
}
<div id="infinity"></div>
无限循环图标
钻石盾牌
#diamond-shield {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 20px solid red;
position: relative;
top: -50px;
}
#diamond-shield:after {
content: '';
position: absolute;
left: -50px;
top: 20px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
<div id="diamond-shield"></div>
钻石盾牌
菱形
#diamond-narrow {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid red;
position: relative;
top: -50px;
}
#diamond-narrow:after {
content: '';
position: absolute;
left: -50px;
top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
<div id="diamond-narrow"></div>
菱形
钻石
#cut-diamond {
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
box-sizing: content-box;
position: relative;
margin: 20px 0 50px 0;
}
#cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
<div id="cut-diamond"></div>
钻石
鸡蛋
#egg {
display: block;
width: 126px;
height: 180px;
background-color: red;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
<div id="egg"></div>
鸡蛋
吃豆人
#pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid red;
border-left: 60px solid red;
border-bottom: 60px solid red;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}
<div id="pacman"></div>
吃豆人
对话泡泡
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble: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;
}
<div id="talkbubble"></div>
对话泡泡
阴阳图
#yin-yang {
width: 96px;
box-sizing: content-box;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
box-sizing: content-box;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius: 100%;
width: 12px;
height: 12px;
box-sizing: content-box;
}
<div id="yin-yang"></div>
阴阳图
徽章图
#badge-ribbon {
position: relative;
background: red;
height: 100px;
width: 100px;
border-radius: 50px;
}
#badge-ribbon:before,
#badge-ribbon:after {
content: '';
position: absolute;
border-bottom: 70px solid red;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
top: 70px;
left: -10px;
transform: rotate(-140deg);
}
#badge-ribbon:after {
left: auto;
right: -10px;
transform: rotate(140deg);
}
<div id="badge-ribbon"></div>
徽章图
放大镜
#magnifying-glass {
width: 56px;
box-sizing: content-box;
height: 56px;
border: 14px solid red;
position: relative;
border-radius: 49px;
}
#magnifying-glass:before {
content: "";
display: inline-block;
position: absolute;
right: -30px;
bottom: -18px;
border-width: 0;
background: red;
width: 35px;
height: 12px;
transform: rotate(45deg);
}
<div id="magnifying-glass"></div>
放大镜
月亮
#moon {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 15px 15px 0 0 red;
}
<div id="moon"></div>
月亮
箭头标签
#pointer {
width: 200px;
height: 40px;
position: relative;
background: red;
}
#pointer:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid white;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
#pointer:before {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
<div id="pointer"></div>
箭头标签
