使用css画三角形,首先想到的思路是:利用border边框样式来实现,这是由于border的边框是由四个三角形组成的。
首先生成一个带边框宽高为0的div:
<style> .dom{ width: 0px; height: 0px; border-width: 50px; border-style: solid; border-color: red green blue brown; } </style> <!--宽度为100px--> <div class="dom"></div>
取消其它三边的颜色形成三角形:
这里我们利用transparent的透明颜色来代替。就可以实现了。如下:
1、css向下三角形:
<style> .dom{ width: 0px; height: 0px; border-width: 40px; border-style: solid; border-color: red transparent transparent transparent; /*或者border-color: transparent transparent red;*/ } </style> <div class="dom"></div>
2、css向上三角形:
<style> .dom{ width: 0px; height: 0px; border-width: 40px; border-style: solid; border-color: transparent transparent blue transparent; /*或者border-color:blue transparent transparent*/ } </style> <div class="dom"></div>
3、css向左三角形:
<style> .dom{ width: 0px; height: 0px; border-width: 40px; border-style: solid; border-color: transparent green transparent transparent; } </style> <div class="dom"></div>
4、css向右三角形:
<style> .dom{ width: 0px; height: 0px; border-width: 40px; border-style: solid; border-color: transparent transparent transparent brown; } </style> <div class="dom"></div>
资源网站大全 https://55wd.com 设计导航https://www.wode007.com/favorites/sjdh
css如何实现边框的三角形呢?
上面实现的三角形都是没有带边框的,如果在需求中需要实现带边框的三角形改如何实现呢?思路为:思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色;内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。
以css向上带边框三角形为例:
<style> .dom{ width: 0px; height: 0px; border-width:0 40px 40px; border-style: solid; border-color: transparent transparent #333; position: relative; } .dom:after{ content:""; display: block; width: 0px; height: 0px; border-width: 0 38px 38px; border-style: solid; border-color: transparent transparent red; position: absolute; top:1px; left:-38px; } </style> <div class="dom"></div>