html - 如何用两个内联 div 制作倾斜的上边框？

Question

我正在一个页面上有几个部分的网站。我想为中间有倾斜透明箭头的每个部分制作一个顶部边框。我确实尝试使用 2 个 div 并内联显示它们并添加左右边框。为了说明我想要完成的事情，请参阅：网站

我的问题是边框看起来很乱，当我调整屏幕大小时，边框会改变位置。我正在使用 wordpress 和 bootstrap 来创建页面。

任何帮助，将不胜感激！

谢谢

Answer 1

不确定您的代码是什么样子以及您想要它如何，但这里有一个示例可以帮助您入门，您可以修改代码以满足您的需求。

HTML

<div class="parent-div-border">
    <div class="down-arrow">
    </div>
</div>

CSS

body{
    margin: 0 auto;
}
.parent-div-border {
        width:100%;
        position:relative;
        border-left:0px solid transparent;
        border-right:0px solid transparent;
        border-top:50px solid #1d1d1d;
}
.down-arrow {
        margin 0 auto;
        border-left:50px solid transparent;
        border-right:50px solid transparent;
        border-top:50px solid #1d1d1d;
        margin-top: 0px;
        margin-left:45%;
        float: left;
}

工作小提琴：http: //jsfiddle.net/yGSYn/1/

Answer 2

听起来你正在寻找这样的东西......不过是一个 div。

HTML

<div class="cutout-border">
</div>

CSS

.cutout-border {
  width: 100%;
  min-height: 5em;
  background-color: black;
}

.cutout-border:before {
  content: "";
  display: block;
  margin: 2em auto 2em;
  position: relative;
  text-align: center;
  width: 0;
  border-top: 5em solid white;
  border-left: 5em solid transparent; 
  border-right: 5em solid transparent; 
}

演示