84669인 학습
152542인 학습
20005인 학습
5487인 학습
7821인 학습
359900인 학습
3350인 학습
180660인 학습
48569인 학습
18603인 학습
40936인 학습
1549인 학습
1183인 학습
32909인 학습
大概是这种样子,左右两张图片,鼠标有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下调试,代码精简。
效果图如下: