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 {
      文字居中;
      背景透明;
      背景图像: url(../img/header.jpg);
      背景位置: 0% 25%;
      背景大小: 覆盖;
      背景重复: 不重复;
      颜色: 白色;
      盒阴影: #421D5D 0像素 5像素 15像素;
      左下角边框半径: 100%;
      右下角边框半径: 100%;
      高度: 350像素;
      最大高度: 350像素;
      宽度: 110%;
      左边距: -5% !important;
      溢出: 隐藏;
    }
.video-container {
      上边距: -48像素;
      最大高度: 100%;
      左下角边框半径: 100%;
      右下角边框半径: 100%;
    //  溢出: 隐藏;
    }
.header-video {
      宽度: 100%;
      最大高度: 350像素;
      左下角边框半径: 100%;
      右下角边框半径: 100%;
    }

有人有解决这个问题的想法吗？我想我可能已经走错了路，但我想不到其他的方法！

谢谢你的帮助！

- Alok Kumar

Answer 1

你的 index-header div 和视频元素上缺少 position: relative，并且在视频元素上需要添加 height: auto;。http://codepen.io/anon/pen/EKJbpe

这个特效中大部分CSS都是不必要的，所以我将其大大简化，只保留了必需的部分……对于设计的其他方面，你可以根据需要添加回去。此外，可能有用的是，border-radius 每个角可以使用2个值，这样可以更好地控制曲线的轮廓，并有助于减少视频被切割的情况——代码实例展示了这一点。最后，也许是个人喜好，但我建议使用 left:-5%; 而不是 margin-left:-5%; —— 我认为这样你可能会遇到更少的副作用，并且在语义上更加合理……只是将某个东西向左移动，而不改变它周围的空间。

.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;
}

- ryantdecker