700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 前端怎么画三角形_WEB前端-CSS三角形绘制方法

前端怎么画三角形_WEB前端-CSS三角形绘制方法

时间:2021-03-16 16:10:49

相关推荐

前端怎么画三角形_WEB前端-CSS三角形绘制方法

我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。

今天给大家带来 CSS 三角形绘制方法

代码如下:#triangle-up{

width:0;

height:0;

border-left:50pxsolidtransparent;

border-right:50pxsolidtransparent;

border-bottom:100pxsolidred;

}

代码如下:#triangle-down{

width:0;

height:0;

border-left:50pxsolidtransparent;

border-right:50pxsolidtransparent;

border-top:100pxsolidred;

}

代码如下:#triangle-left{

width:0;

height:0;

border-top:50pxsolidtransparent;

border-right:100pxsolidred;

border-bottom:50pxsolidtransparent;

}

代码如下:#triangle-right{

width:0;

height:0;

border-top:50pxsolidtransparent;

border-left:100pxsolidred;

border-bottom:50pxsolidtransparent;

}

代码如下:#triangle-topleft{

width:0;

height:0;

border-top:100pxsolidred;

border-right:100pxsolidtransparent;

}

代码如下:#triangle-topright{

width:0;

height:0;

border-top:100pxsolidred;

border-left:100pxsolidtransparent;

}

代码如下:#triangle-bottomleft{

width:0;

height:0;

border-bottom:100pxsolidred;

border-right:100pxsolidtransparent;

}

代码如下:#triangle-bottomright{

width:0;

height:0;

border-bottom:100pxsolidred;

border-left:100pxsolidtransparent;

}

希望这篇文章可以帮助到你,总之同学们,it资讯尽在职坐标。

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