用CSS代码绘制三角形 纯CSS绘制三角形的代码

这段时间想用css写出如下的三角形

用CSS代码绘制三角形 纯CSS绘制三角形的代码_第1张图片

经查阅可以使用div的border实现,将div的高度和宽度设置为0然后设置该div的border的大小,和颜色即可显示出如图的样式


1、新建一个元素,如果行内元素就display:block它。


2、把它的宽高设置为height:0px; width:0px;
3、设置边框border属性,用来实现三角形。

可以用如下的的css代码

.triangle{
	 display:inline; 
	 height:0px; 
	 width:0px;
	 border:100px solid #000;
	 border-color:transparent transparent transparent #00A5A5;
	 border-style:solid solid solid dashed; 
	 line-height:0px;
	 }


注:其中transparent是设置哪部分为透明的属性,IE6中不支持transparent则可以设置border-style:solid dashed dashed dashed;其中dashed为设置那部分透明和上边的border-color相同即可
附源代码:








	
demodemo



你可能感兴趣的:(html)