css做三角形

 如果现在需要一个尖角朝上的三角形,那么从这四个三角形里面,貌似只有下面这条边框符合我的需求,所以需要把上边框,和左右两条边框的颜色都改成透明的。在这里,透明可以用transparent来表示:

.ddd{
    width:0;
    height:0;
    border-width:100px;
    border-style:dotted dotted solid dotted;
    border-color: transparent transparent #333 transparent;
}

html:
<div class="ddd"></div>

如图: 

.ddd{
    width:0;
    height:0;
    border-width:100px;
    border-style:dotted solid dotted dotted;
    border-color: transparent #333 transparent transparent;
}

html:
<div class="ddd"></div>

如图: 

直角三角形为

.ddd{
    width: 0;
    height: 0;
    border-width: 100px 200px 100px 0;
    border-style: dotted dotted solid dotted;
    border-color: transparent transparent #333 transparent;
}

html:
<div class="ddd"></div>

如图:

猜你喜欢

转载自blog.csdn.net/yuan_jlj/article/details/88664096