CSS实现空心三角指示箭头

makeFoxPlay 发布于2019-08-30 15:53 / 1951人阅读

摘要：开发中，三角形的日常应用，以三角形指示箭头最为常见，其用来实现非常简单，熟悉了之后相比于引入或是背景图片会是更好更灵活的选择。这样就实现三角形了。实心三角形箭头实心三角形的原理就是一个三角形绝对定位到主体元素边界处并连接起来。

web开发中，三角形的日常应用，以三角形指示箭头最为常见，其用CSS来实现非常简单，熟悉了之后相比于引入SVG或是背景图片会是更好更灵活的选择。

而三角箭头一般而言，又分为两种，一种是视觉上没有边框的，我们叫做实心三角形；还有一种是视觉上有边框的，而三角箭头刨去边框的部分又要与主体元素的背景颜色一致，我们叫做空心三角形。

言归正传，讲一下怎样实现的。

首先，讲一下三角形的实现原理，熟悉的同学可以跳过这一步。

三角形实现原理

三角形的实现原理是宽高都不设置（即为0），只设置边框，如果四个边框都设置宽度（border-width）、样式（border-style）和颜色（border-color），效果如图：

上面是四个边框border-width一样时的效果，其实border-width是可以自己根据需求来变化的，如下图效果：

上面看到的都是四个三角形，其实想实现单个的三角形只需把其他三个三角形的border-color设置为透明色transparent就可以了（2017年还用考虑IE6吗）。

这样就实现三角形了。

实心三角形箭头

实心三角形的原理就是一个三角形绝对定位到主体元素边界处并连接起来。

为了语义化，我们用单标签，三角形用伪类来实现。

把三角形颜色换成和主体元素一致的背景色就可以了。如下图：

空心三角箭头

空心三角形的原理就是一个边框颜色的三角形绝对定位到主体元素边界处并连接起来，然后另一个主体元素背景色的三角形绝对定位并覆盖到第一个三角形上面，关键的一点是第二个三角形相较于第一个三角形定位上偏移的距离应等于边框宽度。

说得可能比较晦涩，看效果图会更清楚明白（为了区分显示，第一个三角形用的粉色，第二个白色）

把第一个三角形颜色换成边框颜色，第二个三角形颜色换成背景颜色就可以了。

为了语义化，我们使用单标签，两个三角形用before和after伪类来实现，因为after伪元素会覆盖before伪元素，所以after伪元素就是第二个三角形。

第二个三角形定位的偏移距离

这是比较容易被忽略的一点！

为了视觉效果，也为了用户体验，我们应该将三角箭头的边框宽度和主体元素的边框宽度保持一致。

一般可能会有同学认为第二个三角形的偏移值和主体元素边框宽度一样，其实是不对的。

第二个三角形相较于第一个三角形的偏移值其实应该是主体元素边框宽度的"根号2"倍，约为1.414，为了方便可以按1.4倍计算。

下图是原理图：

假设主体元素边框宽度为6px，所以第二个三角形相较于第一个三角形的偏移量应为6px*1.4 = 8.4px

在线demo

本文首发于个人博客yoowin.me，欢迎访问！

云服务器 GPU云服务器 html画三角箭头 css三角 css三角形 JS轻松实现CSS设置

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

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

CSS3 用border写空心三角箭头 (两种写法)

摘要：之前一直在寻找这种空心三角箭头终于知道了原理自己记录一下顺便分享给之前跟我一样想要的撸友们第一种写法利用常见的伪元素第二种写法相对于比较简单简单不加这两个属性三角会比上一个略丑大家可以试一下之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~ 第一种写法利用常见的 after伪元素 ...

Kyxy 2019-08-30 13:15 评论0 收藏0
如何用css画三角形

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

Yuqi 2019-08-30 13:06 评论0 收藏0
从零开始单排学设计模式「UML类图」定级赛

摘要：从零开始单排学设计模式的国服排位之旅，今天正式开启目前段位定级赛这篇文章来总结下类图，本来不打算讲类图的，因为我在学习设计模式的时候，一遇到有关的就会自动忽略，一看感觉就很复杂。关联关系用实现箭头来表示。阅读本文大概需要 3.5 分钟。本篇是设计模式系列的开篇，虽然之前也写过相应的文章，但是因为种种原因后来断掉了，而且发现之前写的内容也很渣，不够系统。所以现在打算重写，加上距离现...

Loong_T 2019-08-16 15:04 评论0 收藏0
设计模式之UML类图

摘要：因为依赖关系不强制，所以用虚线表示关联关系关联关系是类属性依赖，很关键，所以使用实线表示。源码地址类图参考慕课网设计模式精讲大话设计模式设计模式之类图学习二类图类图(Class diagram)主要用于描述系统的结构化设计。类图也是最常用的UML图，用类图可以显示出类、接口以及它们之间的静态结构和关系。 0x01.类图中的元素 1.类 Class / 接口 Interface sho...

xiao7cn 2019-08-16 17:39 评论0 收藏0