一、圆形关闭按钮
注：这个×受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');})
