星空网 > 软件开发 > 网页设计

CSS完成三角形

通过设置div的border属性,来实现!

将div的heightwidth属性分别设置为0px,将4边的border值设置为一样的宽度,通过调节边框的颜色课看到效果。

<style>  div{height: 0px;width: 0px;    border-top: 20px solid red;    border-left: 20px solid blue;    border-right: 20px solid gray;    border-bottom: 20px solid pink;  }  </style></head><body>  <div></div></body>

即可得到一个由4个三角形组成的正方形。如下图:

CSS完成三角形

接下去,只要设置将另外3边的颜色去掉就可以得到三角形,此时设置border-color为transparent,此时就能得到三角形。

div{height: 0px;width: 0px;    border-top: 20px solid red;    border-left: 20px solid transparent;    border-right: 20px solid transparent;    border-bottom: 20px solid transparent;  }

得到如下图:

CSS完成三角形

另外,transparent为颜色值,等同于rgba(0,0,0,0),透明度为0。然而在IE6中不支持,会默认显示如下图:

CSS完成三角形

 




原标题:CSS完成三角形

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

做亚马逊怎么爆单最快?高效选品 or listing运营?:https://www.ikjzd.com/articles/130052
速来领取!深圳市2018年第二批境外商标资助拨款来了:https://www.ikjzd.com/articles/130054
亚马逊流量激增!双旺季如何爆单大卖?:https://www.ikjzd.com/articles/130055
2020年热销产品TOP12,最高搜索热度每月超67万次!:https://www.ikjzd.com/articles/130056
掌握这四个推广方向,亚马逊推广效果杠杠的:https://www.ikjzd.com/articles/130057
亚马逊办公用品全球站点连续三年销量疯长:https://www.ikjzd.com/articles/130058
温州旧货市场有玻璃柜卖吗?:https://www.vstour.cn/a/411246.html
如何用摄影作品表现“芳草鲜美,落英缤纷”的:https://www.vstour.cn/a/411247.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流