CSS3画圆环、各种三角形、五角星
一、圆环效果
实现步骤：
1、分析：它是由一个正方形通过border-radius属性转化为圆形的；空心可以由调大边框来实现。
代码如下：
先画出一个空心的正方形
div{
margin: 100px auto;
width: 100px;
height: 100px;
border: 90px solid #00BFFF;
}
2、利用border-radius属性将它变为圆形
div{
margin: 100px auto;
width: 100px;
height: 100px;
border: 90px solid #00BFFF;
border-radius: 50%;
}
最终效果：
二、三角形
这是个四边颜色均不一样的正方形转换而成。
我们首先画出一个长宽均为100px且四边颜色均不一样的正方形，其中四边框的大小150px
css代码如下：
div{
margin: 100px auto;
width: 100px;
height: 100px;
border-left: 150px solid aquamarine;
border-right:150px solid red;
border-top:150px solid palegreen;
border-bottom:150px solid peachpuff;
}
效果：
不难发现，中间那个白色的正方形便是我们之前所设置的盒子的宽高100px,因此想要得到最终效果，我们只需要把宽高设置为0就可以了。最终效果如下：
css代码：
div{
margin: 100px auto;
width:0;
height: 0;
border-left: 150px solid aquamarine;
border-right:150px solid red;
border-top:150px solid palegreen;
border-bottom:150px solid peachpuff;
}
那么由这个例子，我们有了画三角形的思维。需要画哪个方向的三角形，我们就修改另外三个边将其设置为transparent 透明。
举例：
三角形1—直角三角形
代码：
div{
margin: 100px auto;
width:0;
height: 0;
border-left: 150px transparent;
border-right:150px solid red;
border-top:150px solid transparent;
border-bottom:150px solid transparent;
}
由此类推其余三个边。
三角形1—钝角三角形/锐角三角形
div{
margin: 100px auto;
width:0;
height: 0;
border-top:150px solid aquamarine;
border-right:150px solid red;
border-left:150px solid palegreen;
border-bottom:50px solid peachpuff;
}
div{
margin: 100px auto;
width:0;
height: 0;
border-top:150px solid aquamarine;
border-right:150px solid red;
border-left:150px solid palegreen;
border-bottom:250px solid peachpuff;
}
代码我们只修改了属性border-bottom的大小，得出结论：
1-任意一边大小 = 其余三边 — 直角三角形
2-任意一边大小 > 其余三边 — 锐角三角形
3-任意一边大小 < 其余三边 — 钝角三角形
扩展 我们可以试着修改任意两边，或三边，得出的图形又会不一样。
三角形2：
它是由
该图形消去了下半部分所得到的。
消去下半部分即为 不设置border-bottom属性。
代码为：
div{
margin: 100px auto;
width:0;
height: 0;
border-left: 150px solid transparent;
border-right:150px solid red;
border-top:150px solid transparent;
}
由此可以类推其余三种情况。
三、综合图形绘制
1、
这个图我是用三个盒子通过旋转，位移，边框的变化拼接而成的。
感觉有瑕疵（不能完全拼接，衔接边缝有1px左右的误差），且不灵活，其他绘制方法还在摸索中。
先展示该代码：
<body>
<div class="Box">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>
</body>
.Box{
width: 500px;
height: 1000px;
margin: 100px auto;
}
.Box .b1{
margin: 0 auto;
width:0px;
height: 0px;
/* border-top:150px solid aquamarine; */
border-right:150px solid red;
border-left:150px solid palegreen;
border-bottom:150px solid peachpuff;
}
.Box .b2{
margin:0 auto;
width: 0;
height: 0;
border-top:150px solid aquamarine;
border-right:150px solid red;
border-left:150px solid palegreen;
/* border-bottom:150px solid peachpuff; */
}
.Box .b3{
margin:0 auto;
width: 0;
height: 0;
border-top:106px solid plum;
border-right:106px solid pink;
border-left:106px solid palevioletred;
border-bottom:106px solid peru;
transform: rotate(45deg);
position: relative;
top: -256px;
}
2、
该图是通过四个盒子修改边框后再经过浮动拼接而成。
其他方案正在摸索中。
先展示该代码：
<body>
<div class="Box">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
</div>
</body>
.Box{
width: 300px;
height: 300px;
margin: 100px auto;
background-color: black;
}
.Box .b1{
margin: 0 auto;
width:0px;
height: 0px;
border-top:150px solid aquamarine;
/* border-right:150px solid red; */
border-left:150px solid palegreen;
/* border-bottom:150px solid peachpuff; */
float: left;
}
.Box .b2{
margin:0 auto;
width: 0;
height: 0;
border-top:150px solid gold;
border-right:150px solid goldenrod;
/* border-left:150px solid grey; */
/* border-bottom:150px solid darkturquoise; */
float: left;
}
.Box .b3{
margin:0 auto;
width: 0;
height: 0;
/* border-top:150px solid plum; */
/* border-right:150px solid pink; */
border-left:150px solid palevioletred;
border-bottom:150px solid peru;
float: left;
}
.Box .b4{
margin:0 auto;
width: 0;
height: 0;
/* border-top:150px solid salmon; */
border-right:150px solid sandybrown;
/* border-left:150px solid slateblue; */
border-bottom:150px solid darkmagenta;
float: left;
}
扩展：如何给三角形添加边框？
方法：用两个三角形重叠。
3、五角星绘制：
这个五角星可以看出是简单图形的拼接。在这里我们采用三个钝角三角形进行组合。如图所示
接下来的代码：
首先画出三个钝角三角形
<body>
<div class="star">
<div class="t"></div>
<div class="t"></div>
<div class="t"></div>
</div>
</body>
.star{
width: 600px;
height: 600px;
margin: 100px auto;
background-color: black;
}
.star .t{
width: 0;
height: 0;
border-top:10px solid red;
border-right:150px solid transparent;
border-left:150px solid transparent;
border-bottom:150px solid transparent;
}
然后通过position和transform属性将最后两个三角形与第一个三角形进行组合。
代码如下：
.star .t:nth-child(2){
transform: rotate(215deg);
position: relative;
top: -388px;
left: 50px;
}
.star .t:nth-child(3){
transform: rotate(286deg);
position: relative;
top: -550px;
left: 70px;
}
最终效果：
其他方案正在摸索中…