Bootstrap Jumbotron底部的CSS箭头 [英] CSS arrow at bottom of Bootstrap Jumbotron

查看:31
本文介绍了Bootstrap Jumbotron底部的CSS箭头的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试使用边框创建一个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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆