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