带边框半径的 HTML5 和 CSS 标题视频

Question

嘿！

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

屏幕截图 1

但是，我想要一个视频，而不是将普通图像作为此标题的背景。 如果标题是方形的，但带有圆形边缘，我似乎无法让它工作，这将工作正常，这是我管理的最好的：

屏幕截图 2

但是，显然我希望它可以拉伸页面的宽度。 在丢失一半图像方面 - 这很好，但我想保留视频的顶部或中间部分，因为底部在内容方面没有太多可提供的。

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

<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对于index-header div，以及视频元素height:auto; http://codepen.io/anon/pen/EKJbpe

这个特定效果不需要你的大部分 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;
}