网络运营 > 服务器 > Linux

after伪元素实现空心三角箭头和X图标的示例

56人参与2021-01-13

在前端的设计稿上经常会看到‘x’这种形状的关闭按钮和‘>’以及其他三个方向的空心箭头图标。css有多种方式来实现,尝试了一下发现不是很容易记住,今天就来写写一个简单的利用after伪元素来实现的方法。

1、关闭图标

关闭图标

html部分

<span class="close"></span>

css部分

.close{
    display: inline-block;
    width: 14px;
    height: 1px;
    background: #95835e;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.suclose:after {
    content: '';
    display: block;
    width: 14px;
    height: 1px;
    background: #95835e;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
}

原理就是用span元素和after伪元素画两条直线,利用css3的transform属性分别进行旋转达到交叉的效果。

2、空心三角箭头

向上箭头

html部分

<span class="arrowup"></span>

css部分

.arrowup:after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 1px solid #656565;
    border-right: 1px solid #656565;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

右箭头

html部分

<span class="arrowup"></span>

css部分

.arrowup:after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 1px solid #656565;
    border-right: 1px solid #656565;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

原理就是用after伪元素画了一个矩形,只描绘了上边框和右边框,这样就形成了一个箭头的形状,然后再用transform属性调整角度实现不同的朝向。这里就举了两个方向的例子,其他两个方向只要改一下角度即可。

到此这篇关于after伪元素实现空心三角箭头和x图标的示例的文章就介绍到这了,更多相关after实现空心三角箭头和x图标内容请搜索萬仟网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持萬仟网!

您对本文有任何疑问!!点此进行留言回复

推荐阅读

猜你喜欢

after伪元素实现空心三角箭头和X图标的示例

01-13

Fedora Linux文档文本怎么设置字体大小?

01-12

Linux中利用c语言删除某个目录下的文件

01-12

Linux常用命令大全(超全面)

01-12

linux下qt程序报“ error: undefined reference to `ClassA::funcA(unsigned short)‘”

01-13

应用容器化

01-13

拓展阅读

大家都在看

windows10 更新Ubuntu20.04 LTS的方法步骤

06-14

Ubuntu 安装cuda10.1驱动的实现步骤

07-31

详解shell中脚本参数传递的两种方式

11-21

详解shell中脚本参数传递的两种方式

11-21

CentOS7运行.sh脚本提示syntax error: unexpected end of file的解决方法

05-12

shell命令实现当前目录下多个文件合并为一个文件的方法

03-19

Linux查找处理文件名后包含空格的文件(两种方法)

11-25

Apache FlinkCEP 实现超时状态监控的步骤详解

03-09

热门评论