html 实心圆点,css伪元素实现箭头和关闭图标及环形实心圆点
关闭按钮效果的实现
.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);
}
在遇到要实现这样的效果
.box {
margin: 100px 0 0 100px;
width: 20px;
height: 20px;
border: 1px solid red;
border-radius: 50%;
background-image: repeating-radial-gradient(skyblue 0px, skyblue 5px, #fff 5px, #fff 10px);
}
.box:hover {
}
html 实心圆点,css伪元素实现箭头和关闭图标及环形实心圆点相关推荐
- 用CSS伪元素制作箭头
现在让我们开始制作箭头吧! 在开始前,你要知道如何用CSS去画一个三角形,如果还不清楚可以看看这里纯CSS画各种图形 我们用到两个CSS伪元素,before和after,它们属于行内元素,但可以用di ...
- 用css伪元素制作箭头图标
用css伪元素制作跳转箭头图标 在一些前端框架中见到过伪元素做的图标,现在一般都自己写了,用伪元素可以代替不少图片 .yui-cell{ position: relative; } .yui-cell ...
- css伪元素实现 小圆点 样式——css基础积累
最近在做后台管理系统,遇到一个需求,需要在菜单中添加一个小圆点样式.此时可以通过css伪元素样式来实现. .parent-node {font-size: 14px;color:#999999;&am ...
- css 商城 两列_如何使用css伪元素实现超实用的图标库(附源码)
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识 伪元素 伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
- css 伪元素::after与::before的使用
CSS伪元素是用来添加一些选择器的特殊效果. 一般使用是 类或者id::after , 类或者id::before ::after是在类的后面处理逻辑 ::before 是在先的前面处理逻辑 它们 都 ...
- [JS 分析] 汽_车_之_家 JS 生成 CSS 伪元素 hs_kw44_configUS::before
0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...
- 教你玩转CSS 伪元素
目录 CSS 伪元素 语法 :first-line 伪元素 :first-letter 伪元素 伪元素和CSS类 多个伪元素 CSS - :before 伪元素
- html 的css骚操作,意想不到的 CSS 伪元素 before/after 各种骚操作 - 文章教程
CSS 伪元素 before/after 我们经常用到,常见的就是画个三角形.绘画背景阴影等,这篇文章将给大家分享还有很多有趣的操作,比如画线画图标等. 画细线 普通的 border 最小高度为1px ...
- css伪元素选择器,first-letter、first-line
全栈工程师开发手册 (作者:栾鹏) css系列教程1-选择器全解 css伪元素选择器 伪元素选择器,用于选择元素内的局部,包括first-letter.first-line等 代码如下: p:firs ...
最新文章
- 在线作图丨数据降维方法⑤——t-SNE(t-Distributed Stochastic Neighbor Embedding)
- java二级选择题要对一半吗_据说一半以上的java程序员会出错的题
- Android移动开发之【Android实战项目】DAY11-App实现截图分享qq,微信
- dw1000 配置无法通过
- Activiti入门文档
- yum安装时报错,提示/var/run/yum.pid 已被锁定,解决办法
- 程序员面试金典 - 面试题 04.09. 二叉搜索树序列(双端队列+回溯)**
- mybatis-generator-gui 如何exe化
- Trie 树内存消耗问题
- oracle 函数可变参数,6.3 带有可变参数的函数
- Fragment问题集
- ROS World 2020所有视频发布
- 开源 cocos2dx 五彩连珠.
- 春秋·左丘明-《左传·成公八年》
- 微信原版提示音_微信提示音阿豆下载-抖音微信提示音iosv2.1.3_5577安卓网
- Uber是什么 读书笔记
- 由FlexBox算法强力驱动的Weex布局引擎
- DOM节点类型及其属性和方法
- Oracle-分析函数之sum(...) over(...)
- TokenInsight BTC永续合约流动性实时数据 | TokenInsight