作者:WangMin

格言:努力做好自己喜欢的每一件事

你是否还在用图片制作三角形和剪头吗?那就太out了。css可以轻松绘制出你想要的三角形与箭头,而且颜色大小可以随意改变,还不用担心失真等问题。那就一起来看看吧!!

实现原理

首先来看看当我们给元素添加border时,border的样子。假设代码如下:

<div class="box"></div>
.box{
width:100px;
height:100px;
border:2px solid #f00;
}

网页显示如下:



这是我们使用border最常见的情况:给元素添加边框,往往只给border一个较小的宽度(通常为1-2px)。但是这种的常见的用法就会很容易让大家对border的形成方式产生误解,认为元素的border是由四个矩形边框拼接而成。

然而事实并我们认为的那样。元素的border是由三角形组合而成,为了给大家说明这个问题,这里我加大了border的宽度,并为border四条(上、下、左、右)边分别设置了不同的颜色。假设代码如下:

<div class="box"></div>
.box{
width:100px;
height:100px;
border:50px solid;
border-color: tomato peru brown sandybrown;
}

网页显示如下:



从例子中我们可以看出:每个边都是一个梯形。每一条边为什么会呈现出梯形的形态呢?那是因为我给元素设置了宽度与高度,那么如果当我把元素的宽度与高度都设置为0会发生什么情况呢?假设代码如下:

<div class="box"></div>
.box{
width:0px;
height:0px;
border:50px solid;
border-color: tomato peru brown sandybrown;
}

网页显示如下:



这时我们就可以发现元素由上下左右4个三角形 "拼接" 而成。那么为了绘制出三角形,还应该怎么做?显而易见,只需要把其它border边的颜色设置为透明色就可以了。如果想实现向上三角形,则其他的边为transparent,只设置最下面的边框颜色,就可以实现向上三角形,同理可以实现各种三角形。

各种方向三角形的写法

1、向上三角形,根据上面的实现原理,只需要保留下面的边,代码如下:

<div class="box"></div>
.box{
width:0px;
height:0px;
border:50px solid;
border-color: transparent transparent pink transparent;
}

网页显示如下:



2、向下三角形,根据上面的实现原理,只需要保留上面的边,代码如下:

<div class="box"></div>
.box{
width:0px;
height:0px;
border:50px solid;
border-color: pink transparent transparent transparent;
}

网页显示如下:



3、向左三角形,根据上面的实现原理,只需要保留右面的边,代码如下:

<div class="box"></div>
.box{
width:0px;
height:0px;
border:50px solid;
border-color:transparent pink transparent transparent;
}

网页显示如下:



4、向右三角形,根据上面的实现原理,只需要保留左面的边,代码如下:

<div class="box"></div>
.box{
width:0px;
height:0px;
border:50px solid;
border-color:transparent transparent transparent pink;
}

网页显示如下:



5、保留上边和左边组成三角形,代码如下:

<div class="box"></div>
.box{
width:0px;
height:0px;
border:50px solid;
border-color:pink transparent transparent pink;
}

网页显示如下:



6、保留上边和右边组成三角形,代码如下:

<div class="box"></div>
.box{
width:0px;
height:0px;
border:50px solid;
border-color:pink pink transparent transparent;
}

网页显示如下:



7、保留底边和左边组成三角形,代码如下:

<div class="box"></div>
.box{
width:0px;
height:0px;
border:50px solid;
border-color:transparent transparent pink pink;
}

网页显示如下:



8、保留底边和右边组成三角形,代码如下:

<div class="box"></div>
.box{
width:0px;
height:0px;
border:50px solid;
border-color:transparent pink pink transparent;
}

网页显示如下:



从上面可以得到其实三角形是由三条方向的边框组成的,但是如果给四条边框都设置宽度时,即使某一边或者两边的边框颜色为透明色,实质上还是会占据边框宽度,所以当我们在绘制三角形,我们只需要给实现三角形所需要的三边的边框的宽度与颜色设置好就可以了。所以以上的三角形代码都可以根据你的需求简写。

以向下三角形为例,给四边都根据三角形组成原理设置了边框宽度与颜色,网页显示如下:



红色箭头部分其实是没有必要显示出来的,也就是底部边框,所以我们就没有必要给底边设置边框宽度与颜色。代码如下:

<div class="box"></div>
.box{
width:0px;
height:0px;
border-left: 50px solid transparent;
border-right:50px solid transparent;
border-top:50px solid pink;
}

网页显示如下:



同理,上面提到的各种三角形都可以根据自己的需求这样来写,来减少对多余空间的渲染与占据的空间。

实现带边框的三角形

带边框的三角形就是给三角形添加其它颜色的边框,就像给元素添加border一样,效果如下图:



由于不能继续通过给三角形设置border的方法来为其设置边框(因为三角形本身就是利用border实现的),所以只能想其他的办法。而能想到的一个最自然的方法就是三角形叠放,就是把当前三角形叠放在更大的三角形上方,上面效果图所展示出的三角形的实现方法就是把蓝色三角形放在了尺寸更大的红色三角形上。

为了这样的效果,所以需要利用绝对定位方法。首先定义出外面的红色三角形,因为绝对定位要相对于父元素进行定位,所以这里需要给红色三角形设置相对定位,代码如下:

<div class="box"></div>
.box{
width:0px;
height:0px;
position: relative;
border-left: 50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid #f00;
}

网页显示如下:



然后再定义蓝色三角形,但是由于蓝色三角形的定位需要参考红色三角形的位置,所以需要给蓝色三角形设置绝对定位。因此需要将蓝色三角形作为红色三角形的子元素。我首先想到的方法是在红色三角形内部定义另外一个标签来表示蓝色三角形,但是为了节约标签简化网页结构,最好的办法是使用伪元素。蓝色三角形代码如下:

.box:after{
content: "";
width: 0;
height: 0;
position: absolute;
top: 0px;
left: 0px;
border-left: 50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid blue;
}

网页显示如下:



到这一步可能你会有疑问:为什么蓝色三角形会向左偏移一段距离呢,按道理不应该完全重合在红色三角形上吗,就像下面这样:



但是这样会让你觉得似乎红色三角不见了,实际上红色三角形只是被蓝色三角覆盖了,但这也显现出来你的一个问题:对绝对定位没有足够的了解。因为绝对定位的区域是相对于父元素的区域(包括内边距padding所占的区域),然后在这个基础上运用top、left、right、bottom等属性来约束绝对定位子元素的位置。例如如下代码:

<div class="box"></div>
.box{
width:20px;
height:20px;
padding:10px;
position: relative;
border-left: 50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid #f00;
}
.box:after{
content: "";
width: 0;
height: 0;
position: absolute;
top: 0px;
left: 0px;
border-left: 50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid blue;
}

这里我给元素设置了宽度与高度,并且还设置了padding,红色框表示元素的整体尺寸(包括各个方向的内边距),黑色框表示的是蓝色三角形的整体尺寸,从图中可以看出蓝色三角形是相对于红框的左上角进行定位的。

在本例中,由于红色三角形作为绝对定位父元素,它的尺寸为0,所以元素的尺寸就是红色三角形的上顶点,也就是下图中红色箭头交叉位置。



蓝色三角形由于设置了left: 0和top: 0,所以蓝色三角形的所有内容将根据红色三角形的上顶点进行定位。由于蓝色三角形区域也位于其顶点处,而且对其也设置了左右各50px的border,所以蓝色三角形的内容区域将向右偏移50px,所以形成了之前显示的效果。

弄清楚了绝对定位以后,只需要在最开始的代码上稍稍修改就可以将蓝色三角形的顶点与红色三角形顶点相重合,同时还应该适当缩小蓝色三角形的尺寸(根据你需要的边框宽度而定),因为这里我们需要在页面上显示出一个带红色边框的蓝色三角形,代码如下:

<div class="box"></div>
.box{
width:0px;
height:0px;
position: relative;
border-left: 50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid #f00;
}
.box:after{
content: "";
width: 0;
height: 0;
position: absolute;
top: 0px;
left: -46px;
border-left: 46px solid transparent;
border-right:46px solid transparent;
border-bottom:46px solid blue;
}

网页显示如下:



到这一步了,相信大家都知道该怎么做了吧!只需要利用top将蓝色三角形向下移动到合适的位置就可以了,代码如下:

<div class="box"></div>
.box{
width:0px;
height:0px;
position: relative;
border-left: 50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid #f00;
}
.box:after{
content: "";
width: 0;
height: 0;
position: absolute;
top: 3px;
left: -46px;
border-left: 46px solid transparent;
border-right:46px solid transparent;
border-bottom:46px solid blue;
}

最终带红色边框的蓝色三角形就完成了,网页显示效果如下:



向下带红色边框的蓝色三角形,代码如下:

<div class="box"></div>
.box{
width:0px;
height:0px;
position: relative;
border-left: 50px solid transparent;
border-right:50px solid transparent;
border-top:50px solid #f00;
}
.box:after{
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 3px;
left: -46px;
border-left: 46px solid transparent;
border-right:46px solid transparent;
border-top:46px solid blue;
}

网页显示效果如下:



向左带红色边框的蓝色三角形,代码如下:

<div class="box"></div>
.box{
width:0px;
height:0px;
position: relative;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-right:50px solid #f00;
}
.box::after{
content: "";
width: 0;
height: 0;
position: absolute;
top:-46px;
left:4px;
border-top: 46px solid transparent;
border-bottom:46px solid transparent;
border-right:46px solid blue;
}

网页显示效果如下:



向右带红色边框的蓝色三角形,代码如下:

<div class="box"></div>
.box{
width:0px;
height:0px;
position: relative;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-left:50px solid #f00;
}
.box::after{
content: "";
width: 0;
height: 0;
position: absolute;
bottom:-46px;
right:3px;
border-top: 46px solid transparent;
border-bottom:46px solid transparent;
border-left:46px solid blue;
}

网页显示效果如下:

利用三角形实现箭头

学会了带边框三角形的绘制,那我们就可以在它的基础上来实现三角形箭头来 ,只需要稍作修改就可以了。只需要将子元素的top值或者bottom值添加1-2个像素(px),并且将子元素需要保留的那一边的边框颜色设置为白色,这样就可以的到箭头符号了。

1、向上箭头的实现,代码如下:

<div class="box"></div>
.box{
width:0px;
height:0px;
position: relative;
border-left: 50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid #f00;
}
.box:after{
content: "";
width: 0;
height: 0;
position: absolute;
top: 4px;
left: -46px;
border-left: 46px solid transparent;
border-right:46px solid transparent;
border-bottom:46px solid #fff;
}

网页显示如下:



2、向下箭头的实现,代码如下:

<div class="box"></div>
.box3{
width:0px;
height:0px;
position: relative;
border-left: 50px solid transparent;
border-right:50px solid transparent;
border-top:50px solid #f00;
}
.box3:after{
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 4px;
left: -46px;
border-left: 46px solid transparent;
border-right:46px solid transparent;
border-top:46px solid #fff;
}

网页显示如下:



3、向左箭头的实现,代码如下:

<div class="box"></div>
.box{
width:0px;
height:0px;
position: relative;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-right:50px solid #f00;
}
.box::after{
content: "";
width: 0;
height: 0;
position: absolute;
top:-46px;
left:4px;
border-top: 46px solid transparent;
border-bottom:46px solid transparent;
border-right:46px solid #fff;
}

网页显示如下:



4、向右箭头的实现,代码如下:

<div class="box"></div>
.box{
width:0px;
height:0px;
position: relative;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-left:50px solid #f00;
}
.box::after{
content: "";
width: 0;
height: 0;
position: absolute;
bottom:-46px;
right:4px;
border-top: 46px solid transparent;
border-bottom:46px solid transparent;
border-left:46px solid #fff;
}

网页显示如下:


以上仅是个人见解,若有不足之处欢迎在下方评论指出,那就先分享到这里!! 后续继续更新!!

还在用图片表示三角形与箭头吗?不会用CSS来绘制你就OUT了!!!的更多相关文章

  1. CSS绘制三角形和箭头,不用再用图片了

    前言 还在用图片制作箭头,三角形,那就太lou了.css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题. 先来看看这段代码: /**css*/.d1{ width: 0; he ...

  2. CSS绘制三角形和箭头

    <html> <head> <meta charset="utf-8"> <title>CSS绘制三角形和箭头</title& ...

  3. 一张png图片 上面有多个图标,如何用CSS准确的知道其中某个图片的坐标

    一张png图片 上面有多个图标,如何用CSS准确的知道其中某个图片的坐标 ,如下图 可以使用  background background:url(images/xx.png) 40px 10px n ...

  4. CSS效果:CSS实用技巧制作三角形以及箭头效果

    实现如图所示的三角形图标: html代码如下: <div class="arrow-up"></div> <div class="arrow ...

  5. css3的代替图片的三角形

    1.小三角形(与边框结合,不兼容IE8) .callout{ position: relative; width: 100px; height: 100px; background: #fce6ed; ...

  6. 【基础】在css中绘制三角形及相关应用

    简言 本文简要阐述了用CSS边框的方法在页面上绘制三角形,包括几种典型的三角形绘制,还介绍了几个简单的应用场景.利用边框绘制三角形方法只是众多方案中的一种,大家根据项目实际,选用最适宜项目的方案. 1 ...

  7. CSS - Tooltip-arrow 绘制三角形

    问题:纯CSS实现bubble的三角形部分 方法:使用border来绘制三角形:例如 .trangle { ; border-color: transparent; border-style: sol ...

  8. python3 读入一个jpg格式的图片,并转换长宽像素个数,然后进行绘制

    import matplotlib.pyplot as plt from scipy import ndimage import numpy as np import scipy fname=&quo ...

  9. 带箭头的输入框(div+CSS设置滚动条)

    div.textarea等,都可是设置有滚动条: y轴滚动条:overflow-Y:scroll x轴滚动条:overflow-X:scroll <textarea class="ms ...

  10. iOS动画的要素:CALayer维护数据模型和图片,沟通了CPU和GPU--视图中与图形绘制相关的功能

    1)iOS动画的模型:三层树模型: CALayer维护数据模型和图片,沟通了CPU和GPU:数据模型和图片本尊有CPU生成和维护:图片动画由GPU合成和呈现: https://developer.ap ...

随机推荐

  1. SQL Server 配置允许远程连接

    前言 需要别人远程你的数据库,首先需要的是在一个局域网内,或者连接的是同一个路由器,接下来就是具体步骤: 1.首先是要检查SQLServer数据库服务器中是否允许远程链接.其具体操作为: 1. 打开数 ...

  2. 2023-07-23:给你 n 个任务和 m 个工人 每个任务需要一定的力量值才能完成 需要的力量值保存在下标从 0 开始的整数数组 tasks 中 第 i 个任务需要 tasks[i] 的力量才能完

    2023-07-23:给你 n 个任务和 m 个工人 每个任务需要一定的力量值才能完成 需要的力量值保存在下标从 0 开始的整数数组 tasks 中 第 i 个任务需要 tasks[i] 的力量才能完 ...

  3. SSH远程主机执行命令:s2c

    #!/bin/bash ip=$1 ip_num=$(echo $ip | awk -F\. '{print NF}') if [ $ip_num -eq 2 ]; then ip=192.168.$ ...

  4. vulnhub_me and my grilfriend

    解题步骤 主机nmap扫描,开放22和80端口 访问该ip,发现只能本地访问 查看源代码,提示需要使用x-forwarded-for的请求头,可以在burp suite中每次添加一个请求头,也可以使用 ...

  5. C# DateTime 时间格式化

    今天做任务的时候,数据库日期拼写需要 从凌晨到晚上最后一秒,但是传过来的日期数据是 当前的时间,下面是我尝试的解决方案. endTime.ToString("yyyy-MM-dd 23:59 ...

  6. QMainWindow类中比较重要的方法

    方法和描述 addToolBar():添加工具栏 centralWidget():返回窗口中心的一个空间,未设置时返回NULL menuBar(): 返回主窗口的菜单栏 setCentralWidge ...

  7. 【教程】青少年CTF机器人使用教程

    前言 本期教程适用于版本号为2.0.1-Beta的青少年CTF机器人,其他版本可能与当前版本不同. 由于之前版本的机器人重构,所以我们细化了本次的机器人逻辑,并且对机器人的功能进行了一些升级. 机器人 ...

  8. 关于Openssh版本升级问题及版本升级到最新版8.7p1流程(CentOS7系统)

    前言: 对linux服务器做过漏洞扫描的都知道,常常服务器会被扫出一大堆关于openssh的漏洞,诸如下面这些,而其中的原因就是因为openssh版本比较低.于是就需要升级openssh的版本.下面就 ...

  9. Kali开机启动模式修改

    kali Linux安装之后默认启动图形化界面,为了减轻系统负担,可以修改启动进入字符界面. 具体步骤如下: 1.打开引导配置文件 vim /etc/default/grub 2.修改GRUB_CMD ...

  10. vue3 组合式 api 单文件组件写法

    1 Vue3 组合式 API 的基本原理和理念 1.1 Vue3 中的 Composition API Vue3 中的 Composition API 是一种新的编写组件逻辑的方式,它提供了更好的代码 ...