如何使用两个内联div制作倾斜的顶部边框?

时间:2013-07-18 18:56:29

标签: html css

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

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

任何帮助将不胜感激!

THX

2 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

听起来你正在寻找类似这样的东西......虽然是一个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; 
}

<强> Demo