css - 剪裁或倒 Angular 图像的 Angular 以查看背景

Question

我有一个设计，其中图像的 Angular 被切割成 45° Angular 。目前，它是通过用一个绝对定位的跨度来掩盖它来实现的，它有一个透明的背景图像设置， Angular “切”成不透明的白色。这远非理想，首先是因为额外的跨度，其次是因为图像的背景不是均匀的白色。

我打算稍后生成透明的 PNG，但使用 JPEG 和 CSS 会更优雅，而且考虑到图像是照片，带宽占用更少。新的 CSS mask 属性看起来很有前途，但据我所知，它并没有提供“屏蔽”到元素背景的能力，对吗？

所以我的问题是，是否有任何我不知道并且允许我这样做的新 CSS 属性？

Answer 1

使用转换(仅 CSS3 解决方案)

下面的方法有一点不精确，它有两个“编码”的缺点:

1. img 需要两个包装器
2. 需要知道图像的大小(如果图像已设置大小或如果使用 javascript 提供宽度/高度信息，这可能并不总是一个缺点)。

但是，对于 IE8 及更低版本，它确实会很好地降级为方 Angular 。

核心思想是调整外包装的大小并隐藏其溢出，适当调整大小、旋转和缩小内包装以创建倒 Angular (也隐藏了溢出)，然后反向旋转并按比例放大，并在需要时重新定位嵌套在里面的 img。该方法足够强大，可以根据需要设置一些相当不错的边框，尽管浏览器上此类边框的呈现质量各不相同。

Here's the fiddle.

HTML(基本形式)

span 可以是 div。

<span class="chamfer">
    <span>
        <img src="http://placehold.it/351x151" />
    </span>
</span>

CSS(基本形式)

.chamfer {
    overflow: hidden;
    display: inline-block; /* could be "block" */
    margin: 25px; /* for demo only */
    /* Because of the rotations following, it seems like an odd
       number in width and height worked more consistently, as
       it gives a "middle" pixel by which to transform the rotation
       off of
    */
    width: 351px; /* width of image */
    height: 151px; /* height of image */
}

.chamfer > span {
    overflow: hidden;
    display: inline-block; /* could be "block" */
    -moz-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    /* The rotation gets the chamfer angle
       the scale sets the "size" of the cut
       though not very precisely (exact px height
       is not possible to set explicitly.
    */
    -moz-transform: rotate(45deg) scale(.9);
    -webkit-transform: rotate(45deg) scale(.9);
    -o-transform: rotate(45deg) scale(.9);
    -ms-transform: rotate(45deg) scale(.9);
    transform: rotate(45deg) scale(.9);
    /* top/bottom padding is image width (351px)
       minus the image height (151px) = 200px divided by 2;
       if the image were taller than wide, then this
       would become (iH - iW) / 2 for the left/right padding 
    */
    padding: 100px 0; 
    margin-top: -100px; /* adjust for the padding */
    /* the following helped "square" the item better */
    width: 100%;
    height: 100%;
}

.chamfer img {
    display: inline-block; /* could be "block" */
    -moz-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    /* The rotation is reversing the wrapper rotation
       to put the image horizontal again, while the scale
       is the inverse of the wrapper's scale, so here
       it is ( 1 / 0.9 ) = 1.11, to scale the image back
       up to correct size
    */
    -moz-transform: rotate(-45deg) scale(1.11);
    -webkit-transform: rotate(-45deg) scale(1.11);
    -o-transform: rotate(-45deg) scale(1.11);
    -ms-transform: rotate(-45deg) scale(1.11);
    transform: rotate(-45deg) scale(1.11);  
}

HTML(带 2 像素边框的较小倒 Angular )

请参阅上面的 fiddle，了解带有 10px 边框版本的“更大”倒 Angular 。

当然，如果您的所有图片都设置了固定大小的边框，您只需将其设置为与上面的基本 html 一样，而不是像我在这里那样重写类。

<span class="chamfer small b2">
    <span>
        <img src="http://placehold.it/351x151" />
    </span>
</span>

CSS(覆盖上面的基本 CSS)

请参阅上面的 fiddle，了解带有 10px 边框版本的“更大”倒 Angular 。

当然，如果您的所有图像都设置了固定大小的边框，您只需将这些设置为基本 CSS 的值，而不是在此处定义的单独类中执行。

.b2 * { 
    border: 2px solid black;
}

.chamfer.b2 { /* 2px border */
    width: 355px; /* 4px added for the 2px border */
    height: 155px; /* 4px added for the 2px border */
}

.chamfer.b2 > span {
    margin-top: -102px; /* the extra 2px is to accomodate top border of 2px */
    margin-left: -2px; /* this is for the 2px left border */
}

.chamfer.small > span {
    /* changed the scale for a smaller cut */
    -moz-transform: rotate(45deg) scale(.96);
    -webkit-transform: rotate(45deg) scale(.96);
    -o-transform: rotate(45deg) scale(.96);
    -ms-transform: rotate(45deg) scale(.96);
    transform: rotate(45deg) scale(.96);
}

.chamfer.small img {
    /* scale changed on wrapper to .96 so scale changes on 
       image to ( 1 / 0.96 ) = 1.042. 
    */
    -moz-transform: rotate(-45deg) scale(1.042);
    -webkit-transform: rotate(-45deg) scale(1.042);
    -o-transform: rotate(-45deg) scale(1.042);
    -ms-transform: rotate(-45deg) scale(1.042);
    transform: rotate(-45deg) scale(1.042);    
}