css实现div里面一个叉

html-css010

css实现div里面一个叉,第1张

你可以使用CSS的伪元素属性:after来实现div里面一个叉。你可以设置该 “叉” 的大小和位置,并使用你可以使用CSS的伪元素属性:after来实现div里面一个叉。你可以设置该 “叉” 的大小和位置,你可以使用下面的CSS代码来实现:

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全部不支持。