php制作倒三角形教程,用transparent做出三角形

这次给大家带来用transparent做出三角形，用transparent做出三角形的注意事项有哪些，下面就是实战案例，一起来看一下。

效果图如下

示例代码

*{

margin: 0;

padding: 0;

}

.box{

margin: 40px auto;

width: 60px;

background-color: #f0ac6b;

}

.t1{

margin: 40px auto;

width: 0px;

height: 0px;

/*background-color: #f0ac6b;*/

border-bottom: 40px solid red;

border-right: 20px solid transparent;

border-left: 20px solid transparent;

}

.t2{

margin: 40px auto;

width: 0px;

height: 0px;

/*background-color: #f0ac6b;*/

border-bottom: 40px solid transparent;

border-right: 40px solid red;

/*border-left: 20px solid transparent;*/

}

.t3{

margin: 40px auto;

width: 0;

height: 0;

border-top: 40px solid red;

border-right: 20px solid transparent;

border-left: 20px solid transparent;

}

.t4{

margin: 40px auto;

width: 0;

height: 0;

border-top: 40px solid transparent;

border-left: 40px solid red;

}

.t5{

margin: 40px auto;

width: 0;

height: 0;

border-top: 40px solid red;

border-right: 40px solid transparent;

}

.t6{

margin: 40px auto;

width: 0px;

height: 0px;

border-left: 40px solid transparent;

border-bottom: 40px solid red;

}

.t7{

margin: 40px auto;

width: 0;

height: 0;

border-left: 40px solid red;

border-bottom: 20px solid transparent;

border-top: 20px solid transparent;

}

.t8{

margin: 40px auto;

width: 0;

height: 0;

border-right: 40px solid red;

border-bottom: 20px solid transparent;

border-top: 20px solid transparent;

}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：