CSS常用样式

您所在的位置：网站首页 › arrow模块 › CSS常用样式

CSS常用样式

2023-09-28 21:43| 来源: 网络整理| 查看: 265

作者：程序员学院官方网址：https://www.chengxuyuan.com

1、前言

今天帮大家总结一下CSS绘制箭头的多种方法。

2、开始绘制单个箭头

（1）方法一

首先我们绘制一个正方形模块，同时给他上、右边框（只要是相邻的两个边距都是可以的~），包括边框颜色和宽度，该设置决定了箭头的宽度和颜色，最后旋转即可。

注意：旋转的中心为盒子模型的几何中心。

HTML代码：

CSS代码：

.arrow-right { width: 60px; height: 60px; background-color: transparent; /* 模块背景为透明 */ border-color: #f02c57; border-style: solid; border-width: 6px 6px 0 0; margin: 300px auto; transform: rotate(45deg); /*箭头方向可以自由切换角度*/ }

（2）方法二

第二种方法我们用模块的伪类:after和:before和上一篇文章（CSS常用样式——绘制各种角度的三角形（1））介绍的绘制直角三角形的方法来实现。

首页我们用伪类:after和:before绘制两个相同大小、相同方向的三角形，一个设置为箭头颜色的背景，另一个与底色相同的颜色，两个相重叠，但要有一定距离的便宜，作为箭头的大小。

HTML代码：

CSS代码：

.arrow-right { width: 100px; height: 100px; position: relative; margin:300px auto; } .arrow-right:before{ content: ""; display: block; position: absolute; top: 50%; right: 0; width: 0; height: 0; border:100px solid; margin-top: -100px; border-color: transparent transparent transparent #f02c57; /* 箭头颜色 */ } .arrow-right:after{ content: ""; display: block; position: absolute; top: 50%; right: 10px; /*位置偏移，决定箭头的粗细*/ width: 0; height: 0; border:100px solid; margin-top: -100px; border-color: transparent transparent transparent #fff; /* 与模块底色相同*/ }

这两种方法，均可以用标签或标签的伪类来完成，相比而言，个人觉得第一种方法比较简单。

3、双箭头

学会制作了单箭头，双箭头我们制作起来就很容易了，

（1）方法一

这里利用的是标签的伪类:after和:before

在这里插入图片描述

HTML代码：

CSS代码：

.arrow-right { width: 100px; height: 100px; margin: 300px auto; display: flex; } .arrow-right::before, .arrow-right:after { content: ""; width: 100px; height: 100px; background-color: transparent;/* 模块背景为透明 */ border-color: #f02c57; border-style: solid; border-width: 6px 6px 0 0; transform: rotate(45deg); }

（2）方法二

在这里插入图片描述

HTML代码：

CSS代码：

.arrow-right { display: flex; width: 400px; height: 400px; margin: 400px; } .arrow-right span { width: 100px; height: 100px; position: relative; margin: 0 20px; } .arrow-right span:before { content: ""; display: block; position: absolute; top: 50%; right: 0; width: 0; height: 0; border: 100px solid; margin-top: -100px; border-color: transparent transparent transparent #f02c57; /* 箭头颜色 */ } .arrow-right span:after { content: ""; display: block; position: absolute; top: 50%; right: 10px; /*位置偏移，决定箭头的粗细*/ width: 0; height: 0; border: 100px solid; margin-top: -100px; border-color: transparent transparent transparent #fff;/* 与模块底色相同*/ }

怎么样？有没有get起来？

在这里插入图片描述

【本文地址】

CSS常用样式

CSS常用样式

今日新闻

推荐新闻