CSS常用样式——绘制单（双）箭头的多种方法（二）
时间：2023-03-30 23:16:58
CSS
作者：程序员学院官网：https://www.chengxuyuan.com一、前言双箭头的多种方法。2.开始画单箭头（一）方法一首先我们画一个正方形的模块，同时给它上边框和右边框（只要两个相邻的边距都可以~），包括边框颜色和width，这个设置决定了箭头的宽度和颜色，最后旋转。注：旋转中心为盒模型的几何中心。HTML代码：
CSS代码：.arrow-right{width:60px;高度：60px；背景颜色：透明；/*模块背景是透明的*/border-color:#f02c57;边框样式：实心；边框宽度：6px6px00；边距：300px自动；变换：旋转（45度）；方法我们使用模块的伪类:after和:before以及上一篇文章（CSS常用样式-绘制各种角度的三角形（一））介绍的绘制直角三角形的方法。我们使用伪类：after和:before来绘制两个相同大小和方向的三角形。一种设置为箭头颜色的背景色，另一种与背景色同色。两者重叠，但又隔着一定的距离。,作为箭头的大小。HTML代码：
CSS代码：.arrow-right{width:100px;高度：100px；位置：相对；margin:300pxauto;}.arrow-right:before{content:"";显示：块；位置：绝对；顶部：50%；右：0；宽度：0；高度：0；边框：100px实心；边距顶部：-100px；边框颜色：透明透明透明#f02c57；/*箭头颜色*/}.arrow-right:after{content:"";显示：块；位置：绝对；顶部：50%；右：10px；/*确定箭头粗细的位置偏移量*/width:0;高度：0；边框：100px实心；边距顶部：-100px；边框颜色：透明透明透明#fff；/*与模块背景色相同*/}这两个方法可以配合labels或者Label伪类来完成，相比之下，个人觉得第一种方法比较简单。3.双箭头学会了做单箭头，我们做双箭头就很容易了。(1)方法一使用标签伪类after和:beforeHTML代码：
CSS代码：.arrow-right{width:100px;高度：100px；边距：300px自动；显示：flex;}.arrow-right::before,.arrow-right:after{content:"";宽度：100px；高度：100px；background-color:transparent;/*模块背景是透明的*/border-color:#f02c57;边框样式：实心；边框宽度：6px6px00；transform:rotate(45deg);}(2)方法二HTML代码：
