使用HTML和CSS剪切形状

Question

我正在尝试设置一个横幅，该横幅的特征是带有切口的覆盖层。叠加层下方是图像。

[我试图弄清楚如何在HTML和CSS中创建它，到目前为止，我的实验已经看到我在使用伪元素，但是正在努力按照以下所示的形状和位置来重新创建设计。

我当前的HTML看起来像这样：

<header class="main" style="background-image: url(./assets/images/bg-hero.jpg)">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="row row--no-pad">
                    <div class="col-6">
                        <a href="/">
                            <img src="./assets/images/logo.png" alt="">
                        </a>
                    </div>

                    <div class="col-6">
                        <a href="#" class="menu-toggle"></a>
                    </div>
                </div>

                <div class="row">
                    <div class="banner">
                        <div class="row">
                            <div class="col-12">
                                <h1>Lorem ipsum dolor sit amet</h1>

                                <p>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet, L lorem ipsum dolor sit amet.</p>

                                <a href="#" class="button button--primary">View our services</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

这里是设计：

谢谢，

本

Answer 1

您正在寻找的被称为image clipping。网上有很多文章介绍如何使用CSS（here is one）来进行操作。该过程非常简单，因为只需要一行CSS即可完成此任务。您需要利用clip-path才能完成此操作，我强烈建议您先阅读the documentation。

构建clip-path可能很困难，具体取决于要使用的内容，但是Clippy是一个在线剪辑路径助手，非常有用。但是，根据您提供的图像，以下内容将起作用：

html, body {
  margin: 0;
  height: 100%;
  background-color: #124;
  background-image: linear-gradient(to right, #111, #124);
  background-image: -webkit-linear-gradient(to right, #111, #124);
}
.background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2940219/F2376C81-A74D-4543-8E8F-94F02B135900.jpeg');
  background-size: cover;
  background-position: center;
  clip-path: polygon(56% 0, 78% 50%, 56% 100%, 31% 100%, 52% 50%, 28% 0);
}
.main-content {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  padding: 15px;
}
.main-content h1 {
  width: 250px;
  margin: 0;
}
.main-content a {
  color: #fff;
  background-color: #3a7;
  text-decoration: none;
  padding: 5px 25px;
  width: 150px;
  text-align: center;
}

<div class="background-image"></div>
<div class="main-content">
  <h1>Lorem ipsum dolor sit amet</h1>
  <p>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet, L lorem ipsum dolor sit amet.</p>
  <a href="#" class="button button--primary">View our services</a>
</div>

您最感兴趣的部分是：

clip-path: polygon(56% 0, 78% 50%, 56% 100%, 31% 100%, 52% 50%, 28% 0);

此外，请不要忘记clip-path具有需要考虑的-webkit版本。

clip-path: polygon(56% 0, 78% 50%, 56% 100%, 31% 100%, 52% 50%, 28% 0);
-webkit-clip-path: polygon(56% 0, 78% 50%, 56% 100%, 31% 100%, 52% 50%, 28% 0);

Answer 2

图像裁剪绝对是一个选择，尽管如果您想使用更传统的东西，则可以使用如下边框：

#cutBox{
  width: 100%;
  height: 600px;
  background-image: url('https://wallpaperplay.com/walls/full/7/2/4/272374.jpg');
  background-size: cover;
  display: flex;
}

#leftPane, #rightPane{
  background-color: midnightblue;
}

#leftPane, #rightPane{
  height: 100%;
  width: 40%;
}

#leftTri{
  border-left: 100px solid midnightBlue;
  border-top: 300px solid transparent;
  border-bottom: 300px solid transparent;
  margin-right: 200px;
}
#rightTri{
  border-left: 100px solid transparent;
  border-top: 300px solid midnightblue;
  border-bottom: 300px solid midnightblue;
}

#leftPane > .pane-text{
  position: relative;
  color: white;
  top: 40%;
  font-size: 26px;
  margin-left: 60%;
  right: -10px;
}

.subtext{
  margin-left: 20px;
  font-size: 18px;
}

<div id="cutBox">
  <div id="leftPane">
    <div class="pane-text">
      Lorem Ipsum
      <div class="subtext">
        dolor sit amet
      </div>
    </div>
  </div>
  <div id="leftTri">
  </div>
  <div id="rightTri">
  </div>
  <div id="rightPane">
  </div>
</div>

由于视口较小，它可能看起来有些奇怪，但通常效果很好。

Answer 3

您可以使用clip-path属性来实现上述效果。

例如，此多边形将创建将创建星形的蒙版。

.star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

这里是有关clip-path的教程