用css做出来一个三角形

时间：2017-04-09 11:34:24 阅读：200 评论：0 收藏：0 [点我收藏+]

用css做出来一个三角形

<div class="triangle"> 三角形复习<span></span></div>

/* 相对定位*/

.triangle {

position: relative;

}

/* 绝对定位*/

.triangle span {

position: absolute;

top: 5px;

display: inline-block; /* 行内块*/

width: 0;

height: 0;

border-width: 5px;

/*边线颜色设置 transparent 透明顺序上右下左更改顺序可以得到不同角度的正三角行 */

border-color: transparent red transparent transparent ;

/*边线样式设置为实线*/

border-style: solid solid solid solid;

}

技术分享

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent; 
}

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}

原文：http://www.cnblogs.com/ysshuai/p/6683954.html

踩

(0)

评论一句话评论（0）

分享档案

更多>