84669 orang belajar
152542 orang belajar
20005 orang belajar
5487 orang belajar
7821 orang belajar
359900 orang belajar
3350 orang belajar
180660 orang belajar
48569 orang belajar
18603 orang belajar
40936 orang belajar
1549 orang belajar
1183 orang belajar
32909 orang belajar
大概是这种样子,左右两张图片,鼠标有hover效果,不裁图的话用css怎么实现我试过border旋转,但是超出容器高度,如果是画梯形,怎么把图片放上去我试了这个问答--css如何让p变成直角梯形好像hover并不能正确区分两部分?可以给我思路和方向,我去查资料,谢谢
ringa_lee
<p class="pic1 pic"> <img src="img/1.jpg" /> </p> <p class="pic2 pic"> <img src="img/2.jpg" /> </p>
核心是让父元素skew一个角度,再让img skew回来。
.pic{ transform:skew(50deg,0deg); } .pic img{ transform: skew(-50deg,0deg); }
然后利用padding对img进行移动,找好位置。
所有代码如下:
<style type="text/css"> *{ margin:0; padding:0; box-sizing: border-box; } body{ padding-top: 100px; padding-left: 100px; } .pic{ /*设置border让你看清变化*/ border: 1px solid red; width: 200px; height: 300px; display: inline-block; overflow:hidden; transform:skew(50deg,0deg); } .pic1{ } .pic2{ /*设置-8让两个inline-block无缝隙*/ margin-left: -8px; } .pic img{ width:200px; height:300px; transform: skew(-50deg,0deg); } .pic1 img{ padding-left: 177px; width: 380px; padding-top: 150px; } .pic2 img{ padding-top: 150px; } </style> <body> <p class="pic1 pic"> <img src="img/1.jpg" /> </p> <p class="pic2 pic"> <img src="img/2.jpg" /> </p> </body>
我只在chrome下调试,代码精简。效果图如下:
用transform: skew可以做
dom结构如下:
核心是让父元素skew一个角度,再让img skew回来。
然后利用padding对img进行移动,找好位置。
所有代码如下:
说明一下
我只在chrome下调试,代码精简。
效果图如下: