Bootstrap Jumbotron底部的CSS箭头 [英] CSS arrow at bottom of Bootstrap Jumbotron
问题描述
我正在尝试使用边框创建一个css形状,以在下面的图像中表示黑色形状....
I am trying to create a css shape using borders to represent the BLACK shape in the image below....
黑色形状将放置在Bootstrap巨型Botron内(或上方).红色区域是背景图片.
The black shape will sit inside (or over) a Bootstrap jumbotron. The red area is a background image.
我一直在尝试下面的代码,该代码给了我一个箭头,但不是我需要的形状(也许是两个箭头?).任何帮助表示赞赏.
I have been experimenting with the below code which gives me an arrow, but not the shape I need (which is two arrows perhaps?). Any help appreciated.
.jumbotron:after {
content: "";
position: absolute;
top: 100%;
left: 0;
border-bottom: 60px solid red;
border-left: 50vw solid transparent;
border-right: 50vw solid transparent;
}
推荐答案
使用@IWrestledABearOne模板,这是在底部带有某种箭头的东西.
With using @IWrestledABearOne template, here is something with a kind of arrow at the bottom.
引导: http://www.bootply.com/WgaUA2VjxN
Css :
.yomama{
background-image: url(https://i.stack.imgur.com/O0Zxn.png);
background-size: cover;
background-position: center bottom;
overflow:hidden;
margin:0;
}
.yomama-wrp{overflow:hidden;position:relative;}
.yomama:before{
content:'';
width:150%;
left:-25%;
background:black;
height:100%;
position:absolute;
top:100%;
transform-origin:top center;
transform: rotate(10deg);// translateY(-30px);
}
.yomama:after{
content:'';
width:150%;
right:-25%;
background:black;
height:100%;
position:absolute;
top:100%;
transform-origin:50% 0%;
transform: rotate(-10deg);// translateY(-30px);
}
HTML :为超大型飞机添加包装:
Html: Add a wrapper for the jumbotron :
这篇关于Bootstrap Jumbotron底部的CSS箭头的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!