html - 使用 CSS3 为长方体添加倒 Angular

Question

我正在为我们的大院构建一个元素网站，现在我正在为着陆页构建一个新闻提要。

以前，新闻提要框(分为三个框/行)只是真正的文本；现在它涉及文本和图像。早些时候，我可以简单地使用 CSS 渐变来创建所需的效果。问题在于我似乎无法让它与图像背景一起正常工作。

我曾尝试使用图像边框解决该问题，但由于它需要透明以匹配主体背景但仍覆盖图像背景，所以它没有奏效。

我的问题如下:我能否在新闻提要框上创建所请求的倒 Angular 效果，无论正文背景是什么，或者它是否是图像/真实文本，它都可以正常工作？

请查看 jsfiddle 以了解第一个纯文本框的效果以及我想对第二个图像/文本框执行的操作； http://jsfiddle.net/pm6hqtxq/1/

倒 Angular 代码:

background:linear-gradient(135deg, transparent 20px, #333333 0) top left, linear-gradient(0deg, transparent 0px, #333333 0) top right, linear-gradient(0deg, transparent 0px, #333333 0) bottom right, linear-gradient(0deg, transparent 0px, #333333 0) bottom left;

谢谢，汤米

Answer 1

这里是 css 方法。

Fiddle HERE

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