顶部和底部带有双箭头的Div

Question

我不是CSS专家，但我将努力实现以下div形状：

然后，我想在中心插入文本。

我该如何获得这个形状？

下面是我的一些尝试：

 <div class="triangle-down-white" style="height:400px;"> 
                    try
                </div>

和 CSS

.triangle-down-white {
    width: 100%;
    height: 0;
    padding-left:50%;
    padding-top: 4%;
    overflow: hidden;
    background: rgba(140,  140,  140, 0.33);

}
.triangle-down-white:before, 
.triangle-down-white:after {
    content: "";
    display: block;
     height: 122px;
     width: 122px;

    margin-left:-1000px;

    border-left: 1000px solid transparent;
    border-right: 1000px solid transparent;
    border-top: 100px solid rgba(140,  140,  140, 0.33);

}



.triangle-down-white:before
{ /* hide arrow tails background */
      border-top: 100px solid white;
}

更新 我添加了新样式的尖角符号，但是文字出现在 div 后面。我正在使用 bootstrap，并且以下是 html 代码：

<div class="row"> 
                <div class="col-sm-12" id="chevron">
                <p>asdasdasdasasdaasdsadasadsadsasd</p>
                </div>
            </div>

剩下的代码完全是Bootstrap的标准代码。

已解决

我在新元素中添加了z-index：-1。

- Silvio S.

---

我会创建一个普通的div，并添加背景渐变。更多信息请参见此处：http://lea.verou.me/css3patterns/ - albanx

使用 border 与 :before 和 :after 相结合。 - Mark

Answer 1

从这个网站获取，这是您想要的燕尾形状：

#chevron {
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 60px;
  width: 200px;
}
#chevron:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: red;
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg);
}
#chevron:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: red;
  -webkit-transform: skew(0deg, -6deg);
  -moz-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, -6deg);
  -o-transform: skew(0deg, -6deg);
  transform: skew(0deg, -6deg);
}
p{
  position: relative;
  z-index: 1;
}

<div id="chevron"><p>Hello</p></div>

- jaunt

---

你好，感谢您的回答。我尝试将这个div应用到我的bootstrap行中，但当我尝试写东西时，它出现在后面。您有什么建议吗？ - Silvio S.

尝试增加 p CSS 中的 z-index 值 :) 如果不起作用，请更新您的问题并附上剩余的Bootstrap样式。 - jaunt