div::after {
content: "X"
width: 10px
height: 10px
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
}
css里面有个属性叫clip-path,可以把长方形的css元素切割为不规则图形,点击响应的区域也只有切割后的图形才能响应。因此可以利用这个属性生成一下简单的图形。有个工具可以帮助我们生成不规则图形,地址:
借助这个工具,我们就能生成各种简单图形了,比如:
箭头:
向右的箭头:
关闭的叉:
三角形箭头:
注意:iOS浏览器iOS7以上支持,android浏览器4.4以上支持。opera浏览器全部不支持。iE全部不支持。