css代码实现三角形

来源:互联网 发布:linux进程 编辑:程序博客网 时间:2024/06/05 23:27

用css实现三角形效果。

1、<div class="triangle_border_left">

            <!-- <span></span> -->
        </div>
        
.triangle_border_left{
    width:0;
    height:0;
    border-width:30px 30px 30px 0;
    border-style:solid;
    border-color:transparent transparent transparent #333;/*透明 灰 透明 透明 */
    margin:40px auto;
    position:relative;
}

.triangle_border_left span{
    display:block;
    width:0;
    height:0;
    border-width:28px 28px 28px 0;
    border-style:solid;
    border-color:transparent #fc0 transparent transparent;/*透明 黄 透明 透明 */
    position:absolute;
    top:0px;
    left:0px;

}


2、<div style=" border:10px solid; border-color:red red red #FFFFFF; width:0px;"></div>


0 0
原创粉丝点击