1.三等分
2.傳統的十字添加
3.定義塊狀元素的高度，邊界
4.三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
/*設置出事邊距爲0*/
}
html,body{
width: 100%;
height: 100%;
}
.con{
width: 100px;
height: 20px;
border-top:60px double;/*高度爲20，但是設置60px double
進行三等分，形成20px,20px的空格。*/
border-bottom: 20px solid blue;
}
/*border-hover利用border的默認color屬性來設置邊框，例如傳統的十字添加*/
.add{
width: 100px;
height: 100px;
color:#ccc;
transition: color .25s;/*演示250毫秒*/
border:1px solid;
position: relative;
top:0px;
left: 50%;
}/*做出一個塊狀元素，正方形*/
.add:before{
content: '';
width: 60px;
border-top: 10px solid;/*利用border邊框來畫十字*/
position: absolute;/*使其居中，利用position的absolute絕對位置進行判斷*/
top:45px;/*向下偏移45像素，加上自身10px下方45px，正好100px*/
left:20px;/*同理*/
}
.add:after{
content: '';
height: 60px;/*高度爲60px*/
border-left: 10px solid;
position:absolute;
top: 20px;
left: 45px;
}
/*點擊變色*/
.add:hover{
color: blue;
}
.bkp{
height: 400px;/*定義塊狀元素的高度，邊界*/
width: 600px;
background: url(../img/mooc2.png) no-repeat;
border: 1px solid;
/*沒有利用position的absolute絕對位置，加上top，left來居中等操作
而是利用background-position的默認屬性來確定*/
background-position: 40px 40px;/*默認保持距離左邊邊框50像素*/
}
.bkright{
height: 400px;/*定義塊狀元素的高度，邊界*/
width: 400px;
background: url(../img/mooc2.png) no-repeat;
/*沒有利用position的absolute絕對位置，加上top，left來居中等操作
而是利用background-position的默認屬性來確定*/
border-right: 40px solid transparent;
position: absolute;
background-position: 100% 40px;/*默認保持距離左邊邊框50像素*/
position: absolute;
}
.triangle{
width: 100px;
height: 100px;
border:100px solid;
border-color: red orange blue chartreuse;
margin-left: auto;
margin-right: auto;
}
.triangle2{
width: 0px;
height: 0px;
border:50px solid;
border-color: red red transparent transparent;
margin-left: auto;
margin-right: auto;
}
.triangle3{
width: 300px;
border: 100px solid;
border-color: transparent transparent red;
}
.123{
height: 30px;/*定義塊狀元素的高度，邊界*/
width: 30px;
background: url(../img/mooc2.png) no-repeat;
border: 1px solid;
}
/*增加複選框面積*/
.checkbox{
border:2px solid transparent;/*border透明來增加點擊區域*/
box-shadow: insert 0 1px,insert 1px 0,insert -1px 0,insert 0 -1px;
background-color: #fff;
background-clip: content-box;
color:#d0d0d5;
}
</style>
</head>
<body>
<div class="con"></div>
<div class="add"></div>
<div class="bkp"></div>
<div class="bkright"></div>
<div class="triangle">
</div>
<div class="triangle2">
</div>
<div class="triangle3">
</div>
</body>
</html>
