css - 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

但请注意，对所有浏览器的支持还不是很好。据我所知，目前它在 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;
}

更新了带有背景图像的小提琴以显示透明度：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%);
}

演示

（你可能会遇到这个问题，但你可以阅读如何解决它。）

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

小提琴演示