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

站长手记作者： 2024-08-28 05:20:01

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

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

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_69949.html