利用css绘制三角形的方法及拓展

2024-07-11 08:32:25

字体：大中小

来源：转载

供稿：网友

以下是常用的三角形形状

其实都是html+css就能实现，很简单

代码如下：

第一种方法

html代码：

复制代码

代码如下:

<div class="top_triangle"></div>

<div class="bottom_triangle"></div>

<div class="left_triangle"></div>

<div class="right_triangle"></div>

css代码

复制代码

代码如下:
/*向上*/
.top_triangle{
width:0;
height:0;
border-bottom:30px solid green;
border-right:30px solid transparent;
border-left:30px solid transparent;
}
/*向下*/
.bottom_triangle{
width:0;
height:0;
border-top:30px solid black;
border-right:30px solid transparent;
border-left:30px solid transparent;
}
/*向右*/
.left_triangle{
width:0;
height:0;
border-top:30px solid transparent;
border-left:30px solid yellow;
border-bottom:30px solid transparent;
}
/*向左*/
.right_triangle{
width:0;
height:0;
border-top:30px solid transparent;
border-right:30px solid red;
border-bottom:30px solid transparent;
}

第二种方法

以上代码便是实现上下左右方向三角形的代码；然而其实不难发现，其实它们之间有个共同点，都是由border中的top、right、bottom、left实现的，因此我们还有一种写法，通过实现设置一个div的border，让其隐藏掉，再给其中一个方向颜色，该方向的三角形就能显现出来，比如实现向上方向的三角形的css代码：

复制代码

代码如下:
.top_triangle{
width:0;
height:0;
//将其先隐藏掉，再显示。
border:30px solid transparent;
border-bottom:30px solid green;
}

其它方向的就相类似，就不一一举例了。

一点tips
如果认真尝试敲过这个代码的读者或许会发现，以第一种方法的例子比方，都给border设置了三个方向的值，好奇的人会想，只设置两个行或者一个行吗？敲敲就知道啦~

实践中告诉我，设置一个或者两个但设置相反方向上的border值的都不会显示出来，可以试试；但是如果两个中，不同方向上的两个值是会显示出来的，至于是什么形状，就看你选的方向了。实践出真知！

上一篇：解决360双核浏览器兼容模式的页面显示问题

下一篇：CSS3实现同时执行倾斜和旋转的动画效果