CSS3三角形/切出邊框

Question

我想知道是否有一種「簡單」的方式來做下面的事情，比如使用CSS3，我想避免使用圖像和絕對定位或類似的，並且傾向於使用一些CSS方法爲了達成這個。

我也想避免使用任何固定的高度，這種風格也一樣，因爲我將使用在所有的大小和顏色變化的各種元素相同的樣式。

Answer 1

您可以在CSS中使用簡單的剪輯路徑：

clip-path:polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%); 

結果（在Chrome）：

ONLINE DEMO

但要注意的是，支持不是很大卻爲所有的瀏覽器。目前它確實是not work in FF據我所知（我相信你可以使用SVG代替FF）。

更新

好，用SVG玩弄後（我對SVG不是專家）我想出了在FF工作的 「原型」：

在HTML：

<!-- For firefox --> 
<svg class="svg-graphic" width="250" height="36" viewBox="0 0 250 36" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1"> 
    <clipPath id="mask"> 
     <polygon points="0, 0, 250, 0, 235, 18, 248, 35, 1, 35, 15, 18" /> 
    </clipPath> 
</svg> 

然後設置其ID爲CSS剪切路徑：

clip-path:url(#mask); 

它會在Firefox中產生這樣的：

（小提琴與此代碼更新）

Answer 2

這使您的斷裂部位是透明的：

HTML

<div class="left"></div> 
<div class="center"></div> 
<div class="right"></div> 

CSS

.left { 
    width: 0; 
    height: 0; 
    border-top: 60px solid red; 
    border-bottom: 60px solid red; 
    display: inline-block; 
    border-left: 60px solid transparent; 
} 
.center { 
    width: 300px; 
    height: 120px; 
    background-color: red; 
    display: inline-block; 
    margin-left: -4px; 
    margin-right: -4px; 
} 
.right { 
    width: 0; 
    height: 0; 
    border-top: 60px solid red; 
    border-bottom: 60px solid red; 
    display: inline-block; 
    border-right: 60px solid transparent; 
} 

更新小提琴瓦特/背景圖像顯示trasparency：http://jsfiddle.net/Eg9jF/1/

Answer 3

可以使用CSS3漸變在最現代的瀏覽器的支持做到這一點：

h1 { 
    background: red; 
    display: inline-block; 
    color: white; 
    font-family: sans-serif; 
    padding: .5em 1em; 
    margin: 5em; 
    position: relative; 
} 
h1:before, h1:after { 
    content: ''; 
    width: 2em; 
    height: 100%; 
    position: absolute; 
    top: 0; 
} 
h1:before { 
    left: -2em; 
    background-image: -webkit-linear-gradient(45deg, transparent 50%, #ff0000 50%), -webkit-linear-gradient(-45deg, #ff0000 50%, transparent 50%); 
    background-image: -moz-linear-gradient(45deg, transparent 50%, #ff0000 50%), -moz-linear-gradient(-45deg, #ff0000 50%, transparent 50%); 
    background-image: -o-linear-gradient(45deg, transparent 50%, #ff0000 50%), -o-linear-gradient(-45deg, #ff0000 50%, transparent 50%); 
    background-image: linear-gradient(45deg, transparent 50%, #ff0000 50%), linear-gradient(-45deg, #ff0000 50%, transparent 50%); 
} 
h1:after { 
    right: -2em; 
    background-image: -webkit-linear-gradient(-135deg, transparent 50%, #ff0000 50%), -webkit-linear-gradient(135deg, #ff0000 50%, transparent 50%); 
    background-image: -moz-linear-gradient(-135deg, transparent 50%, #ff0000 50%), -moz-linear-gradient(135deg, #ff0000 50%, transparent 50%); 
    background-image: -o-linear-gradient(-135deg, transparent 50%, #ff0000 50%), -o-linear-gradient(135deg, #ff0000 50%, transparent 50%); 
    background-image: linear-gradient(-135deg, transparent 50%, #ff0000 50%), linear-gradient(135deg, #ff0000 50%, transparent 50%); 
} 

Demo

（您可能會遇到這個problem，但您可以閱讀如何解決它。）

Answer 4

我需要爲我的3列行中的每個標題做到這一點，我只需要在一側裁剪。這些答案都沒有爲我工作，所以我想出了這個。

CSS

#test { 
    height: 66px; 
    width: 90%; 
    background-color: #2a6999; 
    position: relative; 
} 

#test::before { 
    z-index: -1; 
    content: ""; 
    position: absolute; 
    left: 25px; 
    width: 100%; 
    height: 33px; 
    top: 0px; 
    background-color: #2a6999; 
    -webkit-transform: skew(-45deg); 
    -moz-transform: skew(-45deg); 
    -o-transform: skew(-45deg); 
    -ms-transform: skew(-45deg); 
    transform: skew(-45deg); 
    } 

#test::after { 
    z-index: -1; 
    content: ""; 
    position: absolute; 
    left: 25px; 
    width: 100%; 
    height: 33px; 
    top: 33px; 
    background-color: #2a6999; 
    -webkit-transform: skew(45deg); 
    -moz-transform: skew(45deg); 
    -o-transform: skew(45deg); 
    -ms-transform: skew(45deg); 
    transform: skew(45deg); 
} 

Fiddle Demo