怎么用css控制border成为三角形
用css控制border成为三角形可以参考以下的代码:
.a {width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:100px solid red;}
扩展资料:
border的css应用
如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
默认值为:medium none。border-color的默认值将采用文本颜色。
提示和注释
注释:HTML 4.01 不推荐使用图像的 "border" 属性。在 XHTML 1.0 Strict DTD 和 HTML 5 中,不再支持该属性。
提示:请使用 CSS 的边框属性来改变元素的边框样式。您可以在一个外部样式表中使用 CSS 边框属性,为站点上的所有图像设置一致的边框。与单独为一个图像设置 border 属性相比,这种方式无疑拥有更高的效率。
参考资料来源:百度百科-border (英文单词)
布局div,并命名id="tri",用CSS来控制div,在style里面,使用border属性对div进行控制,
#tri{
width: 0px;
height: 0px;
border-top: 400px solid red;
border-right: 400px solid blue;
border-bottom: 400px solid green;
border-left: 400px solid yellow;
}
【注意】div的长宽设为0,border为边框,会看到如下四个三角状的图形。
上述代码画的还不是三角形,但是是四个三角,只要将border周边的颜色变成白色就可以了,例如除了border-bottom: 100px solid green;其余全变为white,就会看到如下效果,当然你也可以根据自己需要来调整。
此外可以将border-top的像素设为0;其余两边也调小一点并且颜色设为白色,就会只看到底下的一个三角形了。
【注意】根据自己实际来挑选自己想要达到的效果。图一图二效果不同,就是border设定不同的原因。