菱形图片

有时候可能会遇到菱形图片的需求，可以用下面两种方式实现。

基于变形的方案

这种方式与之前平行四边形的解决方案类似，需要把图片用一个div包裹，然后div和img进行相反的变形。

<div class="diamond-a">
    <img src="cat.jpg">
</div>
.diamond-a{
    margin: 100px;
    width: 250px;
    height:250px;
    transform: rotate(45deg);
    overflow: hidden;
}
.diamond-a > img{
    max-width: 100%;
    transform: rotate(-45deg);
}

自适应椭圆

对于一个正方形的元素，如果设置其属性border-radius的值大于等于边长的一半，那么该元素会变成一个圆形。

<div class="round-a"></div>
body{
    display: flex;
    flex-flow: row wrap; 
    justify-content: space-around;
}
.round-a{
    background: #fb3;
    width: 10em;
    height: 10em;
    border-radius: 50%;
}

伪随机背景

伪随机背景其实还是对条纹背景的扩展。假设一种场景，我们想得到不同颜色和不同宽度的垂直条纹。并且在背景平铺时不会产生接缝。利用linear-gradient好像可以轻松实现

<div class="rb-a"></div>
body{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
div{
    margin: 20px 20px;
    padding: 0;
    min-width: 20em;
    min-height: 6em;
}
.rb-a{
    background: linear-gradient(90deg,#fb3 15%,#655 0,#655 40%,#ab4 0,#ab4 65%,hsl(20,40%,90%) 0);
    background-size: 80px 100%;
}

条纹背景

通常条纹背景是由一个图片来代替，或者使用SVG。能不能利用CSS直接创建条纹图案呢，答案是肯定的。
假设背景是垂直线性渐变。比如：background:linear-gradient(#fb3,#58a);
效果是这个样子的：

如果让渐变区域变的更窄，产生一个无限小的渐变区域，比如：background:linear-gradient(#fb3 50%,#58a 50%); 就可以得到想要的结果了。

灵活的背景定位

假设一种场景，需要对容器某个角对背景图片做偏移定位，比如说右下角。在定位的同时，也希望图片和容易边角之间能够够留出一定的空隙，以避免下图这种效果：

当容器的尺寸固定时，很好解决。但是容器的尺寸不固定时，可以利用下面三种方法来解决。