使用CSS画三角形

lifesimple 发布于2019-08-29 11:07 / 484人阅读

摘要：说到这里，大家该明白了上面的三角形图标是怎么来的了吧元素没有下边框，而左右边框又是透明的，相当于只有上图中的上面的黑色三角形部分。所以，如果我们要做倒立三角形向右的或者向左的三角形，只需要为三角形底部设置边框，两腰边框透明即可。

原文 http://itindex.net/detail/487...三角形-图标

网页中经常有一种三角形的图标，鼠标点一下会弹出一个下拉菜单之类的（之前淘宝也有，不过现在改版好像没有了）

之前以为是个png图标背景，后来在bootstrap中看到有一个图标样式叫做caret的用来实现这种效果。没想到用CSS也能实现这个效果。

看了下源码是这样的：

.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}

研究一番之后，发现原理是这样的：

首先，需要把元素的宽度、高度设为0。

然后设置边框样式。最关键的也在这里。

这里我们先做一个实验，如果一个元素具有下列样式：

{
width: 0;
height: 0;
border: 4px solid;
}

效果是什么？没错是个正方形：

因为元素宽度、高度都为0，只有4px的边框，于是变成了上面的效果。

再来，我们把样式改成下面这样：

{
width: 0;
height: 0;
border-top: 40px solid #000;
border-right: 40px solid #ff0000;
border-left: 40px solid #ff0000;
border-bottom: 40px solid #000;
}

这会是什么效果呢？可能你不会想到：

这是为什么呢？我们打个比方，有四块红色和黑色的木板代表元素的四个边框，把他们两横两竖重叠起来，这时候他们在二维平面的投影便成了上面的效果。

说到这里，大家该明白了上面的三角形图标是怎么来的了吧：元素没有下边框，而左右边框又是透明的，相当于只有上图中的上面的黑色三角形部分。

所以，如果我们要做倒立三角形、向右的、或者向左的三角形，只需要为三角形底部设置边框，两腰边框透明即可。

例如：

{
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid #ff0000;
border-bottom: 40px solid transparent;
}

另外，如果我们把样式改成这样：

{
width: 0;
height: 0;
border-top: 40px solid #000;
border-right: 30px solid #ff0000;
border-left: 50px solid #ff0000;
border-bottom: 25px solid #000;
}

将得到如下效果：

云服务器 GPU云服务器画三角形 html画三角箭头 css三角形 css三角

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111439.html

用CSS画一个带阴影的三角形的示例代码

摘要：思路怎么用画一个带阴影的三角形呢有童鞋说这还不简单吗网上有很多解决方案但其实大多都是实现不太完美的存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种通过边框控制和设为透明设为预定的颜色即可通过旋转盒子方法一可以画三角形但是1. 思路怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一...

chunquedong 2019-04-23 11:43 评论0 收藏0
如何用css画三角形

摘要：那问题来了，如何用来画三角形呢别着急，先来看看我所遇到过的三角形。如下图，有实心三角形，空心的，还有可以归为三角形的小箭头。画一个三角形，首先想到的是如何画三角形的形状，然后给一个背景颜色。在设计稿中，经常会出现好多三角形，如果将三角形变成图片，通过img标签的src或者background中的url来访问，从前端性能方面来看这并不好。那问题来了，如何用css来画三角形呢？别着急，先...

Yuqi 2019-08-30 13:06 评论0 收藏0
css使用border画三角形

摘要：宽度被设为的边框对应方向的边框会形成较大的三角形，且长度加倍的采纳的显示其实也是用三角形实现的上部分是包含采纳两个字的块状元素，设置。前端中的很多地方都会用到三角形，比如tooltip等CSS中创建三角形的方法很多，可以参考这里： CSS创建三角形（小三角）的几种方法比较简单实用的还是使用border来创建三角形，今天主要研究这个的实现将边框分别设置为红/黄/蓝/绿 .triang...

张红新 2019-08-28 18:20 评论0 收藏0
纯CSS画三角原理解析

摘要：纯画三角原理解析因为之前做一个页面出现了很多三角，开始直接用图片感觉并不是很好用，看着总是怪怪的颜色还很难调整的跟背景一样，就搜了一波代码直接用上了，事后想了一下感觉不知道具体原理是什么，很奇怪为什么边框能设置成三角的样式。纯CSS画三角原理解析因为之前做一个页面出现了很多三角，开始直接用图片感觉并不是很好用，看着总是怪怪的颜色还很难调整的跟背景一样，就搜了一波代码直接用上了，事后...

lidashuang 2019-08-30 14:03 评论0 收藏0
css 实现各种基本图形

摘要：三角形三个角分别是，此时画五角星等价于画三个三角形。所以理论上，通过控制一个三条的长度，进而实现不同大小的三角形是可行。实践了一番，由于很难得到一个整数值，所以通过这种方法画正五角形几乎是无法实现的。三角形写 css 的时候，用惯了背景图，忽略了 css 本身其实可以实现很多简单的基本图形，比如三角形： .triangle { border-style: solid; ...

Elle 2019-08-30 13:21 评论0 收藏0