我正在一个页面上有多个部分的网站上工作。我想为每个在中间有倾斜透明箭头的部分做一个顶部边框。我确实尝试使用2个div并将它们显示为内联并添加左右边框。为了说明我想要完成的事情,请参阅:Website
我的问题是边框看起来都搞砸了,当我调整屏幕大小时,边框会改变位置。我正在使用wordpress和bootstrap来创建页面。
任何帮助将不胜感激!
THX
答案 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;
}
答案 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 强>