Question

我的设计中，图像角以45°角切割。目前，它是通过使用绝对定位的跨度进行遮盖来实现的，该跨度具有透明的背景图像设置，其中角落“切割”为不透明的白色。这远非理想，首先是因为额外的跨度，其次是因为图像的背景不是均匀的白色。

我打算稍后生成透明的PNG，但它会更优雅 - 考虑到图像是照片 - 使用JPEG和CSS的带宽更少。新的CSS掩码属性看起来很有希望，但据我所知，它没有提供能力，“掩盖”到元素的背景，是吗？

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

Answer 1

使用转换（仅限CSS3解决方案）

以下方法存在少量不精确性，并且存在两个“编码”缺点：

img
需要知道图像的大小（如果图像设置了大小，或者如果使用javascript来提供宽度/高度信息，则可能并不总是有缺点。）

核心思想是调整外包装的大小并隐藏其溢出，正确调整大小，旋转和缩小内包装以创建倒角（也隐藏溢出），然后反转旋转并缩放，并在需要时重新定位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（带有2px边框的较小倒角）

对于带有10px边框版本的“更大”倒角，请参见上面的小提琴。

当然，如果你的所有图片都是一个设置大小的边框，你只需要像上面的基本html一样，而不是像我这里那样覆盖类。

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

CSS（覆盖上面的基本css）

对于带有10px边框版本的“更大”倒角，请参见上面的小提琴。

当然，如果你的所有图片都是一个设置大小的边框，你只需要将它们作为基础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);    
}

Answer 2

查看此博客文章（及其相应的jsFiddle），作者使用多个背景渐变来实现我认为您想要做的事情：

http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

div {
    background: #c00; /* fallback */
    background:
        -moz-linear-gradient(45deg,  transparent 10px, #c00 10px),
        -moz-linear-gradient(135deg, transparent 10px, #c00 10px),
        -moz-linear-gradient(225deg, transparent 10px, #c00 10px),
        -moz-linear-gradient(315deg, transparent 10px, #c00 10px);
    background:
        -o-linear-gradient(45deg,  transparent 10px, #c00 10px),
        -o-linear-gradient(135deg, transparent 10px, #c00 10px),
        -o-linear-gradient(225deg, transparent 10px, #c00 10px),
        -o-linear-gradient(315deg, transparent 10px, #c00 10px);
    background:
        -webkit-linear-gradient(45deg,  transparent 10px, #c00 10px),
        -webkit-linear-gradient(135deg, transparent 10px, #c00 10px),
        -webkit-linear-gradient(225deg, transparent 10px, #c00 10px),
        -webkit-linear-gradient(315deg, transparent 10px, #c00 10px);
}

div, div.round {
    background-position: bottom left, bottom right, top right, top left;
    -moz-background-size: 50% 50%;
    -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

剪切或倒角图像的角落以查看背景

2 个答案:

使用转换（仅限CSS3解决方案）

Here's the fiddle.