序言：总结一些常用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;
}
 

在这里插入图片描述
 

 

学完还行练？点这里。