ボーダー半径のHTML5＆CSSヘッダービデオ

Question

ちょっとありました！

私はクライアントのウェブサイトで作業していますが、少し難題に遭遇しました。ホームページは、大きな「ジャンボトロン」スタイルのヘッダを持っていますが、このように、下端に湾曲させることになるだろう：

Screencap 1

しかし、その代わりに、このヘッダーの背景として、通常の画像を有するので、私は」ビデオが好きです。ヘッダが正方形だった場合、これは正常に動作しますが、私はそれを動作させるように見えることはできません丸みを帯びたエッジに、これは私が管理している最高です：

Screencap 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

あなたのCSSのほとんどは、この特定の効果のために必要なので、私はちょうどあなたのように、かなりそれをトリミングしていなかったあなたのindex-header divの上、およびビデオ要素にposition:relative、height:auto;http://codepen.io/anon/pen/EKJbpe

を逃しています実際に何が必要なのかを見ることができます。デザインの他の側面に必要なものを追加することは明らかです。また、ボーダー半径はコーナーあたり2つの値を取ることができるので、カーブの輪郭をより詳細に制御でき、ビデオのカットオフに役立ちます - コードペンはこれを実証します。最後に、個人的な好みかもしれませんが、私はmargin-left:-5%;の代わりに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; 
}