|
.picture {
width: 200px;
transform: rotate(45deg);
overflow: hidden;
margin: 50px;
}
.picture img {
max-width: 100%;
transform: rotate(-45deg) scale(1.42);
z-index: -1;
position: relative;
}
技巧总结：我们希望图片的尺寸属性保留 100% 这个值，这样当浏览器不支持变 形样式时仍然可以得到一个合理的布局。 „ 通过 scale() 变形样式来缩放图片时，是以它的中心点进行缩放的 （除非我们额外指定了 transform-origin 样式） 。通过 width 属性 来放大图片时，只会以它的左上角为原点进行缩放，从而迫使我们 动用额外的负外边距来把图片的位置调整回来.
10、切角效果
思路：基于background:linear-gradient()的方案:把四个角都做出切角效果了。你需要四层渐变图案，代码如 下所示：
html:
复制代码 代码如下:
<div>Hey, focus! You’re supposed to be looking at my corners, not reading my text. The text is just placeholder!</div>
css:
复制代码 代码如下:
.example2{
background: #8BC34A;
background: linear-gradient(135deg, transparent 15px, #8BC34A 0) top left,
linear-gradient(-135deg, transparent 15px, #8BC34A 0) top right,
linear-gradient(-45deg, transparent 15px, #8BC34A 0) bottom right,
linear-gradient(45deg, transparent 15px, #8BC34A 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
padding: 1em 1.2em;
max-width: 12em;
line-height: 1.5em;
}
11、弧形切角 （编辑：百客网 - 百科网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
