Question

你好看看我试图通过html和css模仿的comp的这张照片。

顶部div是具有白色背景的常规div。底部div将有一个背景视频。

html结构很简单，看起来像这样：

<div class="top-div">
    <!-- stuff -->
</div>

<div class="bottom-div">

    <video autoplay="" loop="">
          <source src="myvideo.mp4" type="video/mp4">
          <source src="myvideo.ogg" type="video/ogg">
    </video>

</div>

CSS：

        .top-div {
            height: 500px;
            width: 100%
        }

        .bottom-div {
            height: 500px;
            width: 100%;
            position: relative;
        }

        .banner video {
            position: absolute;
            right: 0;
            bottom: 0;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: -1;
            background: url() no-repeat;
            background-size: cover;
            filter: brightness(30%);
            -webkit-filter: brightness(30%);
        }

我知道如何正确设置视频，但我不确定如何制作倾斜效果。

我以为我可以使用一个伪元素来创建一个三角形，并将它放在div的顶部并让它在视频div上编制索引，但这看起来有点像hacky。

有最好的做法吗？我没有写这个问题给某人给我完整的代码。我只需要有人指出我正确的方向，我可以自己做。

谢谢！

Answer 1

简单易用的方法是使用CSS transform: skew。在你希望倾斜的div中添加这个，然后调整度数。

transform: skew(0deg,-5deg);

偏斜样式意味着（0deg（x）， - 5（y））轴。

＆＃13;

* {
  -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body {
  margin:0;
}

.headerimage {
  background-color:#003a6f;
  height:300px;
  width:100%;
  background-size:cover;
  position:relative;
  z-index:-1;
}

#backshape {
  z-index:1;
  display:block;
  float:left;
  margin-top:-100px;
  width:100%;
  background:white;
  transform:skew(0deg,10deg);
-ms-transform:skew(0deg,10deg); /* IE 9 */
-webkit-transform: skew(0deg,-5deg);
}

.full-image {
  width: 100%;
  height: 200px;
}

.footer {
  height: 100px;
  background: rgb(253, 253, 253);
  width: 100%;
  margin-top: 425px;
  z-index: 500;
  position: relative;
}

＆＃13;

<div class="headerimage">
  &nbsp;
</div>
<div id="backshape">
    <img src="http://placehold.it/540x500" class="full-image">
</div>
<div class="footer">
&nbsp;
</div>

＆＃13;

Answer 2

正如@adam建议的那样，我使用歪斜放了一支钢笔。

http://codepen.io/anon/pen/XNMPWG

HTML

<header class="header" id="header">
    <div class="skew">
        <div class="header-inner">
            <h1 class="logo">White space</h1>
        </div>
    </div>
</header>
<div class="container">
    <main class="main">
        <div class="main-container">
            <section>
                <h1>Video</h1>
                <p></p>
            </section>
        </div>
    </main>
</div>

CSS

html {
  font-family: 'Roboto Condensed';
  color: #fff;
  background: #fafafa;
}

body {
  padding: 0em 0em;
}

.header {
  z-index: 1;
  position: relative;
}

.header .skew:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  overflow: visible;
  width: 100%;
  height: 250px;
  background: #00bcd4;
  z-index: -1;
  -webkit-transform: skewY(-10deg);
  -moz-transform: skewY(-10deg);
  -ms-transform: skewY(-10deg);
  -o-transform: skewY(-10deg);
  transform: skewY(-10deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: initial;
}

.header .skew .header-inner {
  padding: 20px;
  margin-left: auto;
  margin-right: auto;
}

.logo {
  margin: 0;
}

section
{
  text-align:center;
  color: white;
  background-color: red;
  height: 100vh;
  width: 100%;
  position: absolute;
  top: 0;
}
section h1 {
  text-align: center;
  color: white;
  padding-top: 150px;
}

skewY()沿着Y轴倾斜给定角度的元素。 transform: skewY(-10deg);

可能有倾斜的堆叠div与一个有背景图像？

2 个答案: