|
.example1 {
width:140px;
height: 140px;
position: relative;
left: 100px;
line-height: 100px;
text-align: center;
font-weight: bolder;
}
.example1::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
transform: rotate(45deg);
background: #8BC34A;
}
技巧总结：这个技巧的关键在于，我们利用伪元素以及定位属性产生了一个方块， 然后对伪元素设置样式，并将其放置在其宿主元素的下层。这种思路同样可 以运用在其他场景中，从而得到各种各样的效果。
9、菱形图片
思路：基于变形的方案，
我们想让图片的宽度与容器的对角线相等，而不是与边长相等。需要用到勾股定理，这个定理告诉我们，一个正方形的对角线长度等于它的边长乘以根号2，约等于1.414 213 562 。因此，把 max-width 的值设置为根号2乘以100%约等于 414.421 356 2% 是很合理的，或者把这个值向上取整为 142% ，因为我们不希望因为计算的舍入问题导致图片在实际显示时稍小（但稍大是没问题的，反正我们都是在裁切图片嘛）
代码如下：
html:
复制代码 代码如下:
<div>
<img src="http://www.jb51.net/css/imgs/7.jpg">
</div>
css:
复制代码 代码如下:
.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、弧形切角
（编辑：ASP站长网）
|
居龙：中国大陆首次成