因为专注,所以专业
2005 - 2020

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

时间:2020-02-06 03:44:56    作者:八叔模板堂

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

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

以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>
赞(0
免费拨打  111-1111-1111
免费拨打  111-1111-1111免费拨打 111-1111-1111
微信二维码
手机二维码
返回顶部
返回顶部返回顶部