css实现三角形
2017-05-21 本文已影响0人
李永州的FE
html
因为每个图形都有一些共同的样式，所以为每个div设置两个class,一个公共的class，一个各自的class
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="common box1"></div>
<div class="common box2"></div>
<div class="common box3"></div>
<div class="common box4"></div>
<div class="common box5"></div>
<div class="common box6"></div>
<div class="common box7"></div>
</body>
</html>
css
.common{
width: 0px;
height: 0px;
margin-top:50px;
}
.box1{
border-top: 50px blue solid;
border-bottom: 50px green solid;
border-right: 50px yellow solid;
border-left: 50px red solid;
}
.box2{
border-top: 50px blue solid;
border-bottom: 50px transparent solid;
border-right: 50px transparent solid ;
border-left: 50px transparent solid;
}
.box3{
border-top: 50px transparent solid;
border-bottom: 50px transparent solid;
border-right: 50px transparent solid;
border-left: 50px red solid;
}
.box4{
border-top: 50px transparent solid;
border-bottom: 50px transparent solid;
border-right: 50px yellow solid;
border-left: 50px transparent solid;
}
.box5{
border-top: 50px transparent solid;
border-bottom: 50px green solid;
border-right: 50px transparent solid;
border-left: 50px transparent solid;
}
.box6{
border-top: 50px transparent solid;
border-bottom: 50px red solid;
border-right: 50px transparent solid;
border-left: 50px red solid;
}
.box7{
border-top: 50px transparent solid;
border-bottom: 50px green solid;
border-right: 50px green solid;
border-left: 50px transparent solid;
}
QQ图片20170521113731.png
