使用CSS3向框添加倒角

我正在爲我們的複合建立一個項目網站，現在我正在爲目標頁建立一個新聞源。使用CSS3向框添加倒角

此前，新聞饋送盒（分爲三個盒/行）只是真正的文本;現在它涉及文字和圖像。早些時候，我可以簡單地使用CSS漸變創建請求的效果。問題在於我似乎無法使它與圖像背景正常工作。

我試圖解決使用圖像邊界的問題，但它沒有工作，因爲它需要是透明的，所以它匹配身體背景，但仍然覆蓋圖像背景。

我的問題如下：我可以在永不起作用的新聞提要框上創建請求的倒角效果 - 關於身體的背景是什麼，或者它是圖像/真實文字？

請看看jsfiddle，瞭解第一個純文本框有什麼作用，以及我想用第二個圖像/文本框做什麼; http://jsfiddle.net/pm6hqtxq/1/

代碼倒角：

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;

感謝，湯米

來源

2014-10-27 Tommie Michael Lagerroos

如果使用SVG這個這將是很容易的。 – 2014-10-27 22:18:16

@GaryHayes任何建議如何？我應該用哪種方式使用SVG？ – 2014-10-27 22:19:24

要使用的正確術語是「倒角」，而不是三角形邊框。 – 2014-10-27 22:19:30

這裏是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); 
}

來源

2014-10-29 17:30:04

使用CSS3向框添加倒角

回答

相關問題