已解决430363个问题，去搜搜看，总会有你想问的

怎么用css制作不规则形状的链接

关注

首页猿问怎么用css制作不规则形状的链接

CSS3 Html5

想念云的雨 2016-07-28 15:06:25

如何做到给这3张图片各自加一个蒙版效果，并且各自有一个链接，主要是可控区域怎么才能做到和图片大小一样

查看完整描述

1 回答

已采纳

脑阔疼

TA贡献8条经验获得超3个赞

使用css的动画旋转效果做出来的 transform:rotate（30deg）; ，然后 div嵌套定位遮挡 overflowhidden.

1 反对回复 2016-07-28

想念云的雨
能不能给个小例子，贴出来代码，谢谢

回复 2016-07-29
脑阔疼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .contain{ width: 400px; height: 300px; overflow: hidden; margin: 20px auto;background-color: #dff; } .main{ width: 300px; height: 300px; position: relative; top: -100px; left: 80px; background-color: #fdD; -webkit-transform: rotate(45deg); -webkit-transform-origin: 0 center; } .main p{position: relative; top: 100px; -webkit-transform: rotate(-45deg); display: block; } </style> </head> <body> <div class="contain"> <div class="main"> <p>文字在这里三大苏打实打文字在这里三大苏打实打文字在这里三大苏打实打</p> </div> <div class="section"> </div> <div class="aside"> </div> </div> </body> </html>

回复 2016-07-29