分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

css伪元素实现箭头和关闭图标

发布时间:2023-09-06 01:49责任编辑:顾先生关键词:暂无标签

关闭按钮效果的实现

.close{ ???display: inline-block; ???width: 14px; ???height: 1px; ???background: #ccc; ???transform: rotate(45deg); ???-webkit-transform: rotate(45deg);}.close:after { ???content: ‘‘; ???display: block; ???width: 14px; ???height: 1px; ???background: #ccc; ???transform: rotate(-90deg); ???-webkit-transform: rotate(-90deg);}

箭头的实现

arrow: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(-130deg);}

css伪元素实现箭头和关闭图标

原文地址:https://www.cnblogs.com/muqiao/p/8808189.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved