使用 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

图像剪辑绝对是一种选择，但如果你想要更传统的东西，你可以使用这样的边框：

#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 2

可以使用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

的教程

Answer 3

你要找的是image clipping. There are many articles on the web that cover how to do it with CSS (here is one). The process is really straight forward as it only requires one line of CSS to accomplish this task. You'll need to utilize clip-path in order to get this done, and I highly recommend reading 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/GIF_Koi_Pond.gif');
  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);

另一件要记住的事情是，当您将 clip-path 应用于诸如 div 之类的元素时，您不只是剪裁了 background-image，而是剪裁了整个元素.

Answer 4

您还可以使用带有渐变的多个背景，部分隐藏另一个背景图像：

* {
  margin: 0;
  box-sizing: border-box;
}

header {
  background: linear-gradient(60deg, rgb(0, 0, 36) 66.6%, transparent 66.66%, transparent 86%, rgb(0, 0, 36) 86.3%) top left no-repeat, linear-gradient(120deg, rgb(0, 0, 36) 66.6%, transparent 66.66%, transparent 86%, rgb(0, 0, 36) 86.3%) bottom left no-repeat, url(https://placeimg.com/640/480/nature/5) center right;
  background-size: 100% 50%, 100% 50%, auto;
  /*demo purpose*/
  position: relative;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  color: white;
  max-width: 800px;
  min-height:250px;
  box-shadow: 0 0 1px;
  padding-right: 250px;
  margin: auto;
  padding-left:1em;
}

body {
  background: rgb(0, 0, 36)
}

nav {
  position: absolute;
  right: 3%;
  top: 3em;
  border-top: 3px solid;
  border-bottom: 3px solid;
}

nav b {
  display: block;
  width: 2em;
  height: 3px;
  background: white;
  margin: 5px 0
}

<header>
  <nav><b></b></nav>
  <h1>title</h1>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    thus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    <a>link</a>
</header>

根据您的需要调整 start/stop 渐变值，这是一个示例。

使用 HTML 和 CSS 裁剪形状

Cutting Out a Shape using HTML and CSS

html

css

pseudo-element