在网页中如果需要一个三角形的图标，这时如果使用图片或字体图标可能会过于麻烦，这时候，利用CSS也可以轻松解决这个问题：

1、利用CSS画直角等腰三角形

想要使用css画三角形，首先需要定义一个没有宽度和高度的盒子，然后分别定义其四个边框的颜色。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS 三角形</title><style>.box {width: 0;height: 0;border-top: 10px solid red;border-right: 10px solid blue;border-bottom: 10px solid green;border-left: 10px solid yellow;}</style>
</head>
<body><div class="box"></div></body>
</html>

通过以上代码可以得到一个由四种颜色的三角形组成的正方形：

这里的原理是：在css盒子模型中，一个盒子是由其margin、border、padding和内容组成的

可以看到这个盒子模型中有border-top、border-bottom、border-left、border-right，在相邻的边框重叠部分并不是覆盖的，而是会将重叠区域平分给相邻边框。

这里我们给上述例子中的盒子中添加上内容，就可以更加直观看出：

上述例子得到的是四个不同颜色不同方向的三角形，当需要其中某个时，只需要将另外三个边框的颜色设置为透明即可。并且，三角形的大小取决于边框的大小。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS 三角形</title><style>.box {width: 0px;height: 0px;border-top: 10px solid red;border-right: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid transparent;}</style>
</head><body><div class="box"></div></body></html>

但是记住，不可以不写其他三个边框，如果不写则默认不添加边框，这样就会得到一个矩形的边框，不能构造出三角形。

2、利用CSS画其他形式的三角形

通过上述原理，就可以利用CSS画其他形式的三角形：

这里，是先将border-bottom的边框宽度设为0（或者不设置border-bottom也可以），然后再将border-top的边框宽度变大，就可以得到该图形。然后再根据需要将其中的两个边框颜色设置为透明，这时候就可以得到想要的方向的三角形了。

前端之使用CSS画三角形相关推荐

【前端：css画三角形】
网上也有各种各样用CSS样式来写三角形的文章,但个人觉的有些乱,本来可能就不明白如何写,可能看完之后和没看是没什么区别的.因此本人在这里写好了方法,希望可以帮助的刚入门的前端工作者 .box{widt ...
5、css画三角形？原理是什么？
简介 css画三角形的原理是利用盒子边框完成的,实现步骤可以分为以下四部: 设置一个盒子设置四周不同颜色的边框将盒子的宽高设置为0,仅保留边框得到四个三角形,选择其中一个后,其他三角形(边框)设 ...
css画直角三角形,关于CSS画三角形的那些事
用CSS画一个三角形,是不难的问题,但我却掌握的不够熟练,例如当要求为画一个直角三角形或者等腰三角形,我就有点反应不过来.所以,在这篇中点透它,以后再见,不含糊. 原理分析用CSS画三角形,实际上就 ...
HTML之CSS画三角形原理
在进行WEB应用开发的过程中,我们经常会需要使用到三角形图标,例如下面这个下拉选择控件右侧的收缩箭头. 又或者像下面这种情形. 搜索网络之后发现三角形可以通过以下CSS代码实现: #triangle_ ...
如何使用HTML+CSS画三角形
今天又有小姐姐在群里问css是如何画出三角形的,让我想起一开始在学校学HTML+CSS的时候,觉得学这些标签样式很无趣,认为不过是一些文字+图片,直到偶然在慕课网上面看了一个视频=>重拾CSS的 ...
css画三角形的两种方法
css画三角形的两种方法画三角形 1 border 2 css的clip-path 画三角形 1 border <div class="left-down-small" / ...
CSS画三角形及其原理
搜索网络之后发现三角形可以通过以下CSS代码实现: #triangle_bottom{ height:0px; width:0px; border-left:20px solid transparen ...
css画三角形和箭头
css画三角形: 使用 CSS 绘制三角形的第一种方法就是使用「border」属性. 给定一个宽度和高度都为 0 的元素,其 border 的任何值都会直接相交,我们可以利用这个交点来创建三角形. ...
百度前端笔试题 css3画三角形
昨天做了百度2015年前端研发笔试卷,总体感受是比较看重html和css功底,对JavaScript的考察反而更少一些,貌似阿里也是比较看重css这一块.其中有一道用css实现的布局问题,是在一个大矩 ...

前端之使用CSS画三角形

1、利用CSS画直角等腰三角形

2、利用CSS画其他形式的三角形

前端之使用CSS画三角形相关推荐

最新文章

热门文章