Question

嘿那里！

所以我在客户的网站上工作，但遇到了一些挑战。主页上有一个大型的＃jumbotron＆＃34;样式标题，但它会在底部边缘弯曲，如下所示：

但我不是将普通图片作为此标题的背景，而是喜欢视频。如果标题是正方形但是圆形边缘我似乎无法正常工作，这可以正常工作，这是我管理过的最好的：

然而，显然我喜欢它来拉伸页面的宽度。在失去一半图像方面 - 这很好，但我想保留视频的顶部或中间部分，因为底部部分在内容方面没有多少提供。

这是我到目前为止所得到的：

<div class="jumbotron index-header">
 <div class="video-container">
   <video class="header-video" autoplay loop muted>
     <source src="img/purplevideo.mp4" type="video/mp4">
     Your browser does not support video.
   </video>
 </div>
</div>


    .index-header {
      text-align:center;
      background: transparent;
      background-image: url(../img/header.jpg);
      background-position: 0% 25%;
      background-size: cover;
      background-repeat: no-repeat;
      color: white;
      box-shadow: #421D5D 0px 5px 15px;
      border-bottom-left-radius: 100%;
      border-bottom-right-radius: 100%;
      height: 350px;
      max-height: 350px;
      width: 110%;
      margin-left: -5% !important;
      overflow: hidden;
    }

    .video-container {
      margin-top: -48px;
      max-height: 100%;
      border-bottom-left-radius: 100%;
      border-bottom-right-radius: 100%;
    //  overflow: hidden;
    }

    .header-video {
      width: 100%;
      max-height: 350px;
      border-bottom-left-radius: 100%;
      border-bottom-right-radius: 100%;
    }

有没有人对如何解决这个问题有任何想法？我认为到目前为止我可能走错了方向，但我不能想到另一种方式！

感谢您的帮助！

Answer 1

您的position:relative div以及视频元素index-header http://codepen.io/anon/pen/EKJbpe

上遗漏了height:auto;

这个特定的效果不需要你的大部分CSS，所以我把它修剪了很多，以便你可以看到实际需要的东西......显然加回你对设计其他方面的需求。此外，注意边界半径每个角可以取2个值可能很有用，这使您可以更多地控制曲线的轮廓，并且可以帮助减少视频的影响 - 代码笔演示了这一点。最后，个人偏好也许，但我建议left:-5%;而不是margin-left:-5%; - 我认为你可能会有更少的副作用，而且它的语义IMO更多......只是移动一些东西在左边，没有改变它周围的空间。

.index-header {
  box-shadow: #421D5D 0px 5px 15px;
  border-bottom-left-radius: 50% 75px;
  border-bottom-right-radius: 50% 75px;
  height: 350px;
  width: 110%;
  left: -5% !important;
  overflow: hidden;
  position:relative;
}

.header-video {
  width:100%;
  height:auto;
}

HTML5＆amp;带有border-radius的CSS标题视频

1 个答案: