使用CSS3添加倒角到框 [英] Adding chamfer to box using CSS3

问题描述

我正在为我们的园区建立一个项目网站，现在我正在为目标网页建立新闻馈送。

此前，新闻提要盒子（分为三盒/行）只是真正的文字;现在它涉及文字和图像。早些时候，我可以简单地使用CSS渐变创建请求的效果。问题在于我似乎无法使它与图像背景一起正常工作。

我试图用图像边框来解决问题，但它没有工作，因为它需要透明，所以它与身体背景相匹配，但仍然覆盖图像背景。

我的问题如下：
我可以在永远不会工作的新闻提要框上创建请求的倒角效果 - 关于身体的背景是什么，或者它是图像/真实文字吗？

请看看jsfiddle，了解第一个纯文本框有什么作用，以及我想用第二个图像/文本框做什么; http://jsfiddle.net/pm6hqtxq/1/

倒角代码：

 背景：线性渐变（135deg，透明20px，＃333333 0）左上角，线性渐变（0deg，透明0px，＃333333 0）右下，线性渐变（0deg，透明0px，＃333333 0）右下，线性渐变（0deg，透明0px，＃333333 0）左下; 
  

谢谢，
Tommie

解决方案

这是css的方式。

209 /rel =nofollow> Fiddle HERE

  background：＃c00; / *后退* / 
背景：
 -moz-linear-gradient（45deg，透明15px，＃c00 10px），
 -moz-linear-gradient（135deg，透明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）; 
} 
  

I'm building a project website for our compound, and right now I'm building a news-feed for the landingpage.

Earlier, the news-feed boxes (its divided into three boxes/row) was just genuine text; now it involves both text and images. Earlier, I could simply use CSS gradients to create the requested effect. The problem lies in that I can't seem to get it to work properly with image-backgrounds.

I have tried to solve the problem using image-borders, but it didn't work due to the fact that it needs to be transparent so it matches the body-background but still covering the image-background.

My question is as it follows: Can I create the requested chamfer effect on the news-feed boxes that would work never-regarding what's the background of the body or if it's a image/genuine text?

Please take a look at the jsfiddle to understand what effect the first text-only box has and what I want to do with the second image/text-box; http://jsfiddle.net/pm6hqtxq/1/

Code for chamfer:

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;

Thanks, Tommie

解决方案

Here is the css way to do it.

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);
}

这篇关于使用CSS3添加倒角到框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！