纯 css 实现三角效果

之前写过一篇关于 border 如何实现一个三角形的方法，这一次，我们将在这个的基础上实现下面的效果：

关于尺寸方面，自己看着来就行，无所谓的；

步骤一：实现一个400*400的 红色1像素边框的div

     

< html>

< head>

< meta charset= "utf-8" >

< title >css 实现三角 title >

< style >

.abc {

width : 300 px ;

height : 300 px ;

border : 1 px solid red;

}

< / style >

head>

< body>

< div class= "abc" >

div >

body>

html>

效果：

步骤二：在上面这个div内部，再添加两个100*100的div，并且设置宽度为零，高度为零，边框宽度50px;

< html>

< head>

< meta charset= "utf-8" >

< title >css 实现三角 title >

< style >

.abc {

width : 300 px ;

height : 300 px ;

border : 1 px solid red;

}

.t1 {

width : 0 px ;

height : 0 px ;

border : 50 px solid red;

}

.t2 {

width : 0 px ;

height : 0 px ;

border : 50 px solid green;

}

< / style >

head>

< body>

< div class= "abc" >

< div class= "t1">div>

< div class= "t2">div>

div >

body>

html>

效果：

步骤三：我们给 t1 这个div设置：border-left:50px solid yellow;

< html>

< head>

< meta charset= "utf-8" >

< title >css 实现三角 title >

< style >

.abc {

width : 300 px ;

height : 300 px ;

border : 1 px solid red;

}

.t1 {

width : 0 px ;

height : 0 px ;

border : 50 px solid red;

border-left : 50 px solid yellow;

}

.t2 {

width : 0 px ;

height : 0 px ;

border : 50 px solid green;

}

< / style >

head>

< body>

< div class= "abc" >

< div class= "t1">div>

< div class= "t2">div>

div >

body>

html>

 效果：

步骤四：我们继续给 t1 设置：border-right-width:0px;

< html>

< head>

< meta charset= "utf-8" >

< title >css 实现三角 title >

< style >

.abc {

width : 300 px ;

height : 300 px ;

border : 1 px solid red;

}

.t1 {

width : 0 px ;

height : 0 px ;

border : 50 px solid red;

border-left : 50 px solid yellow;

border-right-width : 0 px ;

}

.t2 {

width : 0 px ;

height : 0 px ;

border : 50 px solid green;

}

< / style >

head>

< body>

< div class= "abc" >

< div class= "t1">div>

< div class= "t2">div>

div >

body>

html>

效果：

步骤五：我们继续设置 t1 border-top-color:transparent;  border-bottom-color:transparent; 这样我们就实现了三角，

< html>

< head>

< meta charset= "utf-8" >

< title >css 实现三角 title >

< style >

.abc {

width : 300 px ;

height : 300 px ;

border : 1 px solid red;

}

.t1 {

width : 0 px ;

height : 0 px ;

border : 50 px solid red;

border-left : 50 px solid yellow;

border-right-width : 0 px ;

border-top-color :transparent;

border-bottom-color :transparent;

}

.t2 {

width : 0 px ;

height : 0 px ;

border : 50 px solid green;

}

< / style >

head>

< body>

< div class= "abc" >

< div class= "t1">div>

< div class= "t2">div>

div >

body>

html>

效果：

步骤六：我们再按照上面 t1 的步骤再将 t2 变成三角形；

< html>

< head>

< meta charset= "utf-8" >

< title >css 实现三角 title >

< style >

.abc {

width : 300 px ;

height : 300 px ;

border : 1 px solid red;

}

.t1 {

width : 0 px ;

height : 0 px ;

border : 50 px solid red;

border-left : 50 px solid yellow;

border-right-width : 0 px ;

border-top-color :transparent;

border-bottom-color :transparent;

}

.t2 {

width : 0 px ;

height : 0 px ;

border : 50 px solid green;

border-left : 50 px solid yellow;

border-right-width : 0 px ;

border-top-color :transparent;

border-bottom-color :transparent;

}

< / style >

head>

< body>

< div class= "abc" >

< div class= "t1">div>

< div class= "t2">div>

div >

body>

html>

效果：

步骤七：为了让这两个三角移动，我们给abc这个父级div添加相对定位，给两个小三角添加绝对定位；

 

< html>

< head>

< meta charset= "utf-8" >

< title >css 实现三角 title >

< style >

.abc {

width : 300 px ;

height : 300 px ;

border : 1 px solid red;

position :relative;

}

.t1 {

width : 0 px ;

height : 0 px ;

border : 50 px solid red;

border-left : 50 px solid yellow;

border-right-width : 0 px ;

border-top-color :transparent;

border-bottom-color :transparent;

position :absolute;

left : 300 px ;

top : 50 px ;

}

.t2 {

width : 0 px ;

height : 0 px ;

border : 50 px solid green;

border-left : 50 px solid yellow;

border-right-width : 0 px ;

border-top-color :transparent;

border-bottom-color :transparent;

position :absolute;

left : 299 px ;

top : 50 px ;

}

< / style >

head>

< body>

< div class= "abc" >

< div class= "t1">div>

< div class= "t2">div>

div >

body>

html>

步骤八：我们已经看到两个div 已经合并在一起了，现在让靠左边的div变成白色：

< html>

< head>

< meta charset= "utf-8" >

< title >css 实现三角 title >

< style >

.abc {

width : 300 px ;

height : 300 px ;

border : 1 px solid red;

position :relative;

}

.t1 {

width : 0 px ;

height : 0 px ;

border : 50 px solid red;

border-left : 50 px solid yellow;

border-right-width : 0 px ;

border-top-color :transparent;

border-bottom-color :transparent;

position :absolute;

left : 300 px ;

top : 50 px ;

}

.t2 {

width : 0 px ;

height : 0 px ;

border : 50 px solid green;

border-left : 50 px solid #fff ;

border-right-width : 0 px ;

border-top-color :transparent;

border-bottom-color :transparent;

position :absolute;

left : 299 px ;

top : 50 px ;

}

< / style >

head>

< body>

< div class= "abc" >

< div class= "t1">div>

< div class= "t2">div>

div >

body>

html>

效果：

（为了清晰表明每一步，css样式未优化，请自行优化）