700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > HTML之CSS画三角形原理 使用css画三角形的方法代码

HTML之CSS画三角形原理 使用css画三角形的方法代码

时间:2022-05-19 01:31:11

相关推荐

HTML之CSS画三角形原理 使用css画三角形的方法代码

用纯css画个三角形以下是源代码:

ttp:///TR/xhtml1/DTD/xhtml1-transitional.dtd">/TR/xhtml1/DTD/xhtml1-transitional.dtd">

/1999/xhtml">

用纯css画个三角形

.rightdirection

{

width:0;height:0;

line-height:0;

border-width:20px;

border-style:solid;

border-color:transparent transparent transparent #A9DBF6;

}

.bottomdirection

{

width:0;height:0;

line-height:0;

border-width:20px;

border-style:solid;

border-color: #A9DBF6 transparent transparent transparent;

}

.leftdirection

{

width:0;height:0;

line-height:0;

border-width:20px;

border-style:solid;

border-color: transparent #A9DBF6 transparent transparent;

}

.topdirection

{

width:0;height:0;

line-height:0;

border-width:20px;

border-style:solid;

border-color: transparent transparent #A9DBF6 transparent;

}

画个小三角形

#jb51_a{ border-top:10px solid #FFFFCC;

border-left:10px solid #FF3300;

border-bottom:10px solid #FFFFCC;}

以下代码兼容IE6:

display:inline-block;

width: 0;

height: 0;

border-width: 10px 10px;

border-style: dashed dashed solid dashed;

border-color: transparent transparent #ff0000;

font-size: 0;

line-height: 0;

-moz-transition: -moz-transform .2s ease-in;

-o-transition: -o-transform .2s ease-in;

transition: transform .2s ease-in;

vertical-align:text-top;

margin-left:5px

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。