css如何实现三角形的,纯css如何绘制三角形_利用border实现画三角形的原理方法...

使用css画三角形，首先想到的思路是：利用border边框样式来实现，这是由于border的边框是由四个三角形组成的。

首先生成一个带边框宽高为0的div：

.dom{

width: 0px;

height: 0px;

border-width: 50px;

border-style: solid;

border-color: red green blue brown;

}

取消其它三边的颜色形成三角形：

这里我们利用transparent的透明颜色来代替。就可以实现了。如下：

1、css向下三角形：

.dom{

width: 0px;

height: 0px;

border-width: 40px;

border-style: solid;

border-color: red transparent transparent transparent;

/*或者border-color: transparent transparent red;*/

}

2、css向上三角形：

.dom{

width: 0px;

height: 0px;

border-width: 40px;

border-style: solid;

border-color: transparent transparent blue transparent;

/*或者border-color:blue transparent transparent*/

}

3、css向左三角形：

.dom{

width: 0px;

height: 0px;

border-width: 40px;

border-style: solid;

border-color: transparent green transparent transparent;

}

4、css向右三角形：

.dom{

width: 0px;

height: 0px;

border-width: 40px;

border-style: solid;

border-color: transparent transparent transparent brown;

}

资源网站大全 https://55wd.com 设计导航https://www.wode007.com/favorites/sjdh

css如何实现边框的三角形呢？

上面实现的三角形都是没有带边框的，如果在需求中需要实现带边框的三角形改如何实现呢？思路为：思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所需的颜色；内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。

以css向上带边框三角形为例：

.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;

}

原文链接：https://www.cnblogs.com/ypppt/p/13258258.html

本文来自网络，不代表手讯网立场。