此文主要是为了加深自己对CSS3的一些理解，在此主要列举一下一些多边形如何来画，以及如何调整。长方形和正方形大家都明白，这里就列举了。
目录
1、相关圆形
2、相关三角形
3、相关多边形
1、相关圆形
//单个实心圆，主要注意border-radius即可
.single-round{
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
<div class="single-round">
</div>
//双圆，方式一分别画大小圆
.round-box{
width: 100px;
height: 100px;
position: relative;
}
.round-bigRound {
width: 100px;
height: 100px;
background:black;
border-radius: 50%;
}
.round-smallRound{
width: 80px;
height: 80px;
position:absolute;
left: 10px;
top: 10px;
border-radius: 50%;
background:#cc313d;
}
<div class="round-box">
<div class="round-bigRound"></div>
<div class="round-smallRound"></div>
</div>
//双圆，方式二，只画一个圆利用box-shadow的inset属性内部阴影实现外边圆
.round-boxshadow{
width: 100px;
height: 100px;
background:#cc313d;
border-radius: 50%;
box-shadow: inset 0 0 0 15px rgba(200,200,200, 0.6);
}
<div class="round-boxshadow"></div>
//椭圆，水平半径和垂直半径分别是宽高的一半
.ellipse{
width: 100px;
height: 50px;
background-color: #999;
text-align: center;
border-radius: 50px/25px;
}
<div class="ellipse"></div>
2、相关三角形
//向上三角形
.triangle-up{
width: 0px;
height: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
<div class="triangle-up"></div>
//向下三角形
.triangle-down{
width: 0px;
height: 0px;
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
<div class="triangle-down"></div>
//向左三角形
.triangle-left{
width: 0px;
height: 0px;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
<div class="triangle-left"></div>
//向右三角形
.triangle-right{
width: 0px;
height: 0px;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
<div class="triangle-right"></div>
//左上角三角形，常见置顶标志
.triangle-topleft{
width: 0px;
height: 0px;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
<div class="triangle-topleft"></div>
//右上角三角形
.triangle-topright {
width: 0px;
height: 0px;
border-top: 100 solid red;
border-left: 100 solid transparent;
}
<div class="triangle-topright"></div>
//左底角三角形
.triangle-bottomleft {
width: 0px;
height: 0px;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
<div class="triangle-bottomleft"></div>
//右底角三角形
.triangle-bottomright {
width: 0px;
height: 0px;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
<div class="triangle-bottomright"></div>
//提示对话框
.talkbubble{
width: 200px;
height: 100px;
background-color: red;
position: relative;
left: 100px;
border-radius: 10px;
padding: 5px 10px;
}
.talkbubble:before{
width: 0;
height: 0;
right: 100%;
top: 30px;
position: absolute;
content: "";
border-top: 15px solid transparent;
border-right: 30px solid red;
border-bottom: 15px solid transparent;
}
<div class="talkbubble">
测试文本测试文本测试文本测试文本测试文本
</div>
3、相关多边形
//平行四边形，利用transform：skew 向x轴偏移
.parallelogram {
width: 100px;
height: 50px;
margin-left: 30px;
transform: skew(-30deg);
background-color: red;
}
<div class="parallelogram"></div>
//梯形，类似各个朝向的三角形，只是把中间宽度撑开
.trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
width: 100px;
height: 0px;
}
<div class="trapezoid"></div>
//五角星
.star-five {
width: 0;
height: 0;
color: red;
margin: 50px;
position: relative;
display: block;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 35px solid red;
transform:rotate(35deg);
}
.star-five:before {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 40px solid red;
position: absolute;
top: -25px;
left: -35px;
color: white;
display: block;
content: "";
transform:rotate(-35deg);
}
.star-five:after {
width: 0;
height: 0;
display: block;
position: absolute;
color: red;
top: 3px;
left: -55px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 35px solid red;
content: "";
transform:rotate(-70deg);
}
<div class="star-five"></div>
//五边形
.pentagon {
width: 54px;
position: relative;
border-width: 50px 18px 0;
border-style: solid;
border-color: red transparent;
margin: 50px;
}
.pentagon:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent red;
}
<div class="pentagon"></div>
//六边形
.hexagon {
width: 100px;
height: 55px;
background-color: red;
position: relative;
margin: 50px;
}
.hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: ;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
.hexagon:after {
content: "";
left: 0;
width: 0;
height: 0;
bottom: -25px;
position: absolute;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
<div class="hexagon"></div>
网友评论