after伪元素实现空心三角箭头和X图标的示例_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

在前端的设计稿上经常会看到‘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图标内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!


  • 本文相关:
  • 详解css3 用border写 空心三角箭头 (两种写法)
  • CSS中伪元素after的作用
  • css的伪元素before和after能够加animation吗
  • CSS3如何给伪元素::before添加hover
  • CSS中伪元素after的作用
  • css 如何控制最后一个伪元素
  • 怎么用CSS伪元素实现文字部分变色实例
  • 用CSS创建扁平化面包屑导航中的伪元素after,befor...
  • css伪元素和伪类的区别
  • jQuery如何改变css伪元素样式
  • css 伪元素after为什么会自动换行?有图,求解 ?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程after空心三角箭头x图标详解css3 用border写 空心三角箭头 (两种写法)css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字after伪元素实现空心三角箭头和x图标的示例纯css解决h5布局中的吸顶吸底的实现步骤探究background-position属性中的百分比值的使用在vue-cli中使用css-loader实现css module浅谈解决space-evenly兼容性问题的两种方法纯css实现div悬浮的示例代码(固定位置)详解如何解决position:fixed固定定位偏移问题使用纯 css 实现滚动阴影效果探索css属性*-gradient的实用价值css仿苹果平滑开关按钮效果
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved