CSS 绘制箭头

最新推荐文章于 2024-04-19 10:18:52 发布

奇诗

最新推荐文章于 2024-04-19 10:18:52 发布

阅读量2.3w

点赞数 18

分类专栏：【CSS样式】文章标签：前端 css

本文链接：https://blog.csdn.net/Allen_6/article/details/107497639

版权

【CSS样式】专栏收录该内容

2 篇文章 0 订阅

订阅专栏

序言：总结一些常用CSS样式，方便以后使用

一、边框旋转实现箭头

1、导入css文件

<link rel="stylesheet" href="css/arrow1.css" />

2、设置容器

<div class="arrow-right"/>

3、设置矩形边框
border-style: solid;设置实线边框

.arrow-right {
  content: "";
  height: 60px;
  width: 60px;
  border-color: blue;
  border-style: solid;
  position: absolute;
}

效果图如下：
在这里插入图片描述
4、边框部分隐藏
border-width 设置边框宽度。设置4个值分别代表上边框、右边框、下边框、左边框。
这里我们隐藏下边框和左边框，如下：

 border-width: 8px 8px 0 0;

效果图如下：
在这里插入图片描述
5、边框旋转
在css3的transform属性中，可以使用矩阵matrix对图像进行旋转
上图隐藏的边框，如果旋转一定角度就是箭头，实现如下：

transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);

效果图如下：
在这里插入图片描述
6、完整实现
上述原理已经实现箭头，但是有个问题是箭头上方显示有点不完整，我可以先提前整个矩形容器来容纳箭头。下方是所有代码：

.arrow-right{
  height: 120px;
  width: 60px;
  display :inline-block;
  position: relative;
}
.arrow-right::after {
  content: "";
  height: 60px;
  width: 60px;
  top: 12px;
  border-width: 8px 8px 0 0;
  border-color: blue;
  border-style: solid;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
}

效果图如下：
在这里插入图片描述
这里实现向左箭头只需修改旋转角度即可transform: matrix(-0.71, -0.71, 0.71, -0.71, 0, 0);

二、双三角覆盖实现箭头

1、导入css文件

<link rel="stylesheet" href="css/arrow2.css" />

2、设置容器

<div class="arrow-down"/>

3、绘制矩形
我们先用border绘制由四个三角形组成的矩形

.arrow-down{
    width: 0;
    height: 0;
    border: 60px solid; 
    border-color: blue red yellow green;
}

效果图如下：
在这里插入图片描述
4、绘制三角形
绘制的四个三角形，使用“transparent”透明色–来隐藏3个三角形

 border-color: blue transparent transparent transparent;

效果图如下：
在这里插入图片描述
5、绘制箭头
绘制2个相同大小三角形、产生一定位移，效果如下：

如果覆盖的第2个三角形颜色修改成和背景色一样，代码如下：

.arrow-down{
    width: 0;
    height: 0;
    position: relative;
    border: 60px solid; 
    border-color: blue transparent transparent transparent;
}
.arrow-down::after{
  	content: '';
    position: absolute;
    top: -68px;
    left: -60px;
    border: 60px solid;
    border-color: white transparent transparent transparent;
}

效果如下：
在这里插入图片描述
6、绘制其他箭头
只需要修改隐藏的三角形和位移即可绘制其他方向的箭头。如下绘制向右箭头：

.arrow-right{
    width: 0;
    height: 0;
    position: relative;
    border: 60px solid; 
    border-color: transparent transparent transparent blue;
}
.arrow-right::after{
  	content: '';
    position: absolute;
    top: -60px;
    left: -68px;
    border: 60px solid;
    border-color: transparent transparent transparent white;
}

在这里插入图片描述
·········································································································································
本文介绍css的2种方式绘制箭头，请大家多多指教，能get到知识点不要忘了关注点个赞~