div在顶部和底部带有双箭头 [英] Div with double arrow on top and bottom
本文介绍了div在顶部和底部带有双箭头的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我不是CSS方面的专家,因此要为我的div实现以下形状我会很努力:
I'm not an expert with CSS and I'm gonna be struggled in order to achieve the following shape for my div:
然后我想在中间插入文本.
And then I would like to insert text in the center.
如何获得此形状?
以下,我的一些尝试:
<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;
}
更新 我添加了新样式V形符号,但文本显示在div后面.我正在使用引导程序,并且html代码如下:
UPDATE I added the new style chevron but the text appear behind the div. I'm using bootstrap and the html code is the following:
<div class="row">
<div class="col-sm-12" id="chevron">
<p>asdasdasdasasdaasdsadasadsadsasd</p>
</div>
</div>
其余代码完全是引导程序的标准代码.
The rest of the code is completely the standard one for bootstrap.
已解决
我在新元素上添加了z-index:-1.
I added z-index: -1 at the new element.
推荐答案
来自此网站塑造您想要的形状:
Taken from this website here is the chevron shape you desire:
#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>
这篇关于div在顶部和底部带有双箭头的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文