css 画不规则图形不规则按钮

html-css023

css 画不规则图形不规则按钮,第1张

css里面有个属性叫clip-path,可以把长方形的css元素切割为不规则图形,点击响应的区域也只有切割后的图形才能响应。因此可以利用这个属性生成一下简单的图形。有个工具可以帮助我们生成不规则图形,地址:

借助这个工具,我们就能生成各种简单图形了,比如:

箭头:

向右的箭头:

关闭的叉:

三角形箭头:

注意:iOS浏览器iOS7以上支持,android浏览器4.4以上支持。opera浏览器全部不支持。iE全部不支持。

写一个div,用绝对定位的方式如:b相对于a的绝对定位,b的位置是相对于a来说的

所以a里一定要加一个position:relative,b里就一定要加一个 position: absolute,top和right是位置的距离如图:

.a

{

  width: 968px

  margin: auto

  position: relative

}

.b

{

  width: 288px

  height: 263px

  background: url(../images/foot_pic.gif) no-repeat center center

  position: absolute

  top: -20px

  right: -33px

}