CSS小应用（圆形关闭按钮、大于号、可旋转三角箭头）

一、圆形关闭按钮

注：这个×受line-height影响，垂直方向并不是完全居中。

<div><img src="./IMG_0349.jpg" alt="">
</div>

div{width: 150px;height: 150px;position: relative;
}
div::after{content: '×'; /*这个乘号×，不是字母x*/position: absolute;top: -10px;right: -10px;width: 20px;height: 20px;font-size: 20px;line-height: 20px; /*刚才说垂直不完全对齐，这里适当调一下*/text-align: center;color: #fff;background-color: #f00;border-radius: 50%;cursor: pointer;
}
img{width: 100%;
}

二、大于号箭头

注：实际上就是一个正方形，上和右带边线旋转45度而已。

<span class='gt'>查看更多</span>

.gt::after{content: '';display: inline-block;width: 10px;height: 10px;border-top: 2px solid #BBBBBB;border-right: 2px solid #BBBBBB;transform: rotate(45deg);margin-left: 7px;
}

三、可旋转三角箭头

注：三角箭头实际上做成伪元素的方式不好，这里只是举例，关注样式即可。
它的原理是一个没有内容的元素，把border变大，也能形成一个正方形，其中一个边有颜色，旁边两边透明，就形成了三角箭头。

<div class="arrow">请选择</div>

.arrow{/*这个元素本身的样式不重要*/position: relative;width: 130px;height: 30px;line-height: 30px;text-indent: 10px;border-radius: 5px;border: 1px solid #ccc;
}
.arrow::after{/*形成三角*/content: '';border-top: 7px solid #ccc; border-left: 7px solid transparent;border-right: 7px solid transparent;/*位置居中*/  position: absolute;  right: 15px;top: 50%;transform: translateY(-25%);/*定义变形中心点及过渡效果*/transform-origin: 50% 25%;transition: transform .5s;
}
.active::after {/*旋转180度*/transform: rotate(180deg);
}

$('.arrow').on('click',function(){$(this).toggleClass('active');
})

CSS小应用（圆形关闭按钮、大于号、可旋转三角箭头）相关推荐

【Css】css中class之间＞(大于号)、~(波浪号)、 (空格)、,(逗号)、+(加号)详解（转载，笔记用）
css中">"(大于号)."~"(波浪号)." "(空格).","(逗号)."+"(加号)详解 ...
CSS样式中” 大于号”
CSS样式中" 大于号" 在一段CSS代码中见到一个大于号(>),代码如下: BODY#css-zen-garden > DIV#extraDiv2 { BACKGRO ...
css 大于号标签_CSS设计基础选择器篇
点击上方 Java项目学习 ,选择星标公众号重磅资讯.干货,第一时间送达前言:如果将CSS样式应用于特定的网页对象上,需要先找到目标元素.在CSS样式中执行这一任务的部分被称为选择器. 1 标 ...
css 大于号标签_web前端教程之怎样学好css？
web前端教程之怎样学好css?我推荐题主的学习方法就是:善用调试工具. 使用谷歌浏览器进行调试,在属性不理解时可以直接在浏览器里进行数值调节 css在书写时由于选择器权重问题经常出现样式覆盖的问题 ...
css中的大于号是什么意思有何作用
css中的大于号是什么意思有何作用 .menu :hover > a { color:white; background-color:white ; font-weight:bold; } ...
jquery、css 的选择器(逗号/空格/英文句号/大于号/加号/波浪号)
jQuery.CSS常用选择器符号描述示例说明紧接无符号相当于"并且"关系 input.k-textbox{ ... } 选出input并且包含k-textbox ...
简单的使用css画勾、叉、三角、大于号
勾 .gou{width: 9px;height: 18px;border-right:2px solid #f39800;border-bottom:2px solid #f39800;transf ...
css中“~”（波浪号）、“，”（逗号）、 “ + ”（加号）和 “ ＞ ”（大于号）是什么意思？
1.群组选择器(',') 2.后代选择器(空格) 3.子元素选择器('>') 4.相邻兄弟选择器('+') 5.兄弟选择器('~') "~"的定义和用法 p~ul选择器 p之 ...
css中“~”（波浪号）、“，”（逗号）、 “ + ”（加号）和 “ ”（大于号）是什么意思？
为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景: p~ul{background:#ff0000;}<p>快乐生活</p><ul><li&g ...

CSS小应用（圆形关闭按钮、大于号、可旋转三角箭头）

一、圆形关闭按钮

二、大于号箭头

三、可旋转三角箭头

CSS小应用（圆形关闭按钮、大于号、可旋转三角箭头）相关推荐

最新文章

热门文章