判断三角形html代码,用div+css实现三角，三角形内有字

用div+css实现三角形，三角形内有字

用div+css实现三角形，三角形内有字

如下图：

分享到：

更多

------解决方案--------------------

html>

无标题文档

.a{

border-bottom:1px solid #aaa;

height:50px;

width:100px;

position:relative;

overflow:hidden;

}

.b{

position:absolute;

display:block;

top:0px;

left:0px;

width:100px;

height:50px;

}

.b i,.b em{

position:absolute;

left:0px;

bottom:0px;

border-color:transparent;

border-color:rgba(255,255,255,0);

border-style:solid;

border-width:0 50px 50px 50px;

}

.b i{

border-bottom-color:#aaa;

}

.b em{

border-bottom-color:#FFF;

bottom:-1px;

}

.text{

position:absolute;

bottom:10px;

background:none;

border:none;

outline:none;

text-align:center;

width:100%;

}

用定位模拟呢的，试试看哦。