Question

我的问题是在我的简单横幅上左右移动2张图像。

左边和右边的样本图片：

我花了很多时间才这么简单。任何帮助都非常感激。

我的预期输出：

我尝试过的代码：

.content-up-comming-event
{
  font-size:0.85em;
  min-height:200px; 
  width:96%; 
  margin-left:auto; 
  margin-right:auto; 
  background-color:#ccc; 
  padding:20px 15px;
  z-index:100;
}
.img-left-curve
{
  margin-bottom: -115px; 
  max-width: 14px; 
  z-index:-1;
}
.banner-up-comming-event
{
  height:40px; 
  padding-top:8px; 
  color:#fff; 
  text-align: center; 
  background-color:#000; 
  text-transform: uppercase;
}

<!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <img src="http://i.stack.imgur.com/7Ylry.png" class="img-left-curve" />
    </div>
  </div>
  <div class="banner-up-comming-event">Upcoming Event</div>
  <div class="content-up-comming-event">
    <p><strong><span style="text-decoration: underline; ">Events</span></strong><br/>DDD HQ, Street <br/> 22 Dec 2015</p>
    <p><strong><span style="text-decoration: underline; ">New EW Training (NET)</span></strong><br/>Street HQ, City <br/> 08 Jan 2016<br/>2pm - 6pm</p>
  </div>
</div>

Answer 1

您可以使用纯 CSS 执行此操作，例如此https://jsfiddle.net/2Lzo9vfc/251/

.banner-up-comming-event{
    height:40px; 
    padding-top:8px; 
    color:#fff; 
    text-align: center; 
    background-color:#000; 
    text-transform: uppercase;
    position: relative;
}

.banner-up-comming-event:before {
    border-left: 15px solid #636363;
    border-top: 15px solid transparent;
    bottom: -16px;
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    transform: rotate(-180deg);
}

.banner-up-comming-event:after {
    border-left: 15px solid #636363;
    border-top: 15px solid transparent;
    bottom: -16px;
    content: "";
    height: 0;
    right: 0;
    position: absolute;
    transform: rotate(90deg);
}

Answer 2

所以在这里。我使用了你的图像并将其翻转为右侧。我还尝试了一些小技巧来增强你试图用那个标题创建的3d感觉。我喜欢你。

.banner-up-comming-event:before,
.banner-up-comming-event:after {
  background: transparent url(http://i.stack.imgur.com/7Ylry.png) 0 50% no-repeat;
  content: ' ';
  position: absolute;
  width: 14px;
  height: 14px;
  top: calc(100% + 1px);
  z-index: -1;
}
.banner-up-comming-event:before {
  left: 0;
}
.banner-up-comming-event:after {
  right: 0;
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}
.banner-up-comming-event {
  position: relative;
  height: 40px;
  padding-top: 8px;
  color: #fff;
  text-align: center;
  background-color: #000;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, .27);
  border-radius: 2px;
  box-shadow: 0 4px 5px -2px rgba(0,0,0,.2),0 7px 10px 1px rgba(0,0,0,.14),0 2px 16px 1px rgba(0,0,0,.12);
}
.content-up-comming-event {
  font-size: 0.85em;
  min-height: 200px;
  margin: 0 14px;
  background-color: #ddd;
  padding: 20px 15px;
  z-index: 1;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
  border: 1px solid rgba(255, 255, 255, .27);
  border-top: 0;
  border-radius: 0 0 4px 4px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


<div class="container">
  <div class="banner-up-comming-event">Upcoming Event</div>
  <div class="content-up-comming-event">
    <p><strong><span style="text-decoration: underline; ">Events</span></strong>
      <br/>DDD HQ, Street
      <br/>22 Dec 2015</p>
    <p><strong><span style="text-decoration: underline; ">New EW Training (NET)</span></strong>
      <br/>Street HQ, City
      <br/>08 Jan 2016
      <br/>2pm - 6pm</p>
  </div>
</div>

Answer 3

我得到了解决方案。但这不是最好的。

.content-up-comming-event
{
    position:relative;
    font-size:0.85em;
    min-height:200px; 
    width:92%;
    margin-left:auto; 
    margin-right:auto; 
    background-color:#ccc; 
    padding:20px 15px;
    z-index:100;
}
.img-left-curve
{
    width:4%;
    position:absolute;
    top: 0%;
    left:-4%;
}
.img-right-curve
{
    width:4%;
    position:absolute;
    top: 0%;
    right:-4%;
}
.banner-up-comming-event
{
  height:40px; 
  padding-top:8px; 
  color:#fff; 
  text-align: center; 
  background-color:#000; 
  text-transform: uppercase;
}

<!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


<div class="container">
  <div class="banner-up-comming-event">Upcoming Event</div>
  <div class="content-up-comming-event">
      <img src="http://i.stack.imgur.com/7Ylry.png" class="img-left-curve" />
      <img src="http://i.stack.imgur.com/MQFpL.png" class="img-right-curve" />
    <p><strong><span style="text-decoration: underline; ">Events</span></strong><br/>DDD HQ, Street <br/> 22 Dec 2015</p>
    <p><strong><span style="text-decoration: underline; ">New EW Training (NET)</span></strong><br/>Street HQ, City <br/> 08 Jan 2016<br/>2pm - 6pm</p>
  </div>
</div>

基于响应DOM的夫妇侧图像横幅跟随

3 个答案: