如何使用多边形制作如图所示的背景

问题描述 投票：0回答：1

我想知道如何使用剪辑路径多边形命令制作这样的标题。插入图像会更简单，但我想在 css 中学习和使用动画，我可以做到。

当我尝试不同的方法时，div 相距很远，并且存在各种问题。我会很感激你的建议。

这是我的代码和当前进度enter image description here

HTML：

<body>
    <header class="header">
      <div class="image"></div>
      <div class="text-box">
        <div class="header-button">
          <a href="#zawartosc" class="btn btn-blue">Przejdź dalej</a>
        </div>
      </div>
    </header>

CSS：

body {
  font-family: "Anonymous Pro", monospace;
  font-weight: 400;
  font-size: 16px;
  line-height: 1, 7;
  color: #777;
  padding: 30px;
}

.header {
  height: 80vh;
  background-image: radial-gradient(
    circle at 18.7% 37.8%,
    rgb(238, 226, 226) 0%,
    rgb(211, 219, 223) 90%
  );

  clip-path: polygon(100% 11%, 100% 77%, 0 100%, 0 0);
  backface-visibility: hidden;
  background-position: top;
  background-size: cover;
  color: black;
  position: relative;
  animation-name: movefromright;
  animation-duration: 1.7s;
  animation-timing-function: ease-out;
}

.image {
  background-image: url(img/logo2.png);
  height: 80vh;
  position: relative;
  background-size: cover;
  background-position: top;
  backface-visibility: hidden;
  animation-name: movefromleft;
  animation-duration: 1.7s;
  animation-timing-function: ease-out;
}

我想要这样的效果

(https://i.stack.imgur.com/H6HTK.png)

来源：Canva

html css background polygon
1个回答
0
投票

因此，我可以采取几种方法来处理这个问题。首先 

clip-path
并不允许你在它“之外”做事情。因此，您将无法同时获得剪裁的背景以及红色和蓝色。我做了两个片段供您查看。

第一个片段保持标记不变，并使用 

::before
和 
::after
元素来制作背景。 
::before
创建红色和蓝色，
::after
具有包含径向渐变的剪裁背景。

body {
  font-family: "Anonymous Pro", monospace;
  font-weight: 400;
  font-size: 16px;
  line-height: 1, 7;
  color: #777;
  padding: 30px;
}

.header {
  height: 80vh;
  position: relative;
}

.header::before {  
  background-image: linear-gradient(180deg, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(0, 15, 240, 1) 50%, rgba(0, 15, 240, 1) 100%);
  bottom: 0;
  color: black;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -2;
}

.header::after {
  animation-name: movefromright;
  animation-duration: 1.7s;
  animation-timing-function: ease-out;
  background-image: radial-gradient( circle at 18.7% 37.8%, rgb(238, 226, 226) 0%, rgb(211, 219, 223) 90%);
  backface-visibility: hidden;
  bottom: 0;
  clip-path: polygon(100% 11%, 100% 77%, 0 100%, 0 0);
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.image {
  background-image: url(img/logo2.png);
  height: 80vh;
  position: relative;
  background-size: cover;
  background-position: top;
  backface-visibility: hidden;
  animation-name: movefromleft;
  animation-duration: 1.7s;
  animation-timing-function: ease-out;
}
<header class="header">
  <div class="image"></div>
  <div class="text-box">
    <div class="header-button">
      <a href="#zawartosc" class="btn btn-blue">Przejdź dalej</a>
    </div>
  </div>
</header>

第二个片段更改了标记，我推荐这样做。这将允许您将所有内容都放在剪切容器内，并具有蓝色和红色背景。这也让你不必搞乱 z-index 和伪元素。这些都不是坏事，但我认为只包装标题并在那里应用背景会更容易。

被剪裁元素的内容仍然需要适合被剪裁的容器。有几种方法可以解决这个问题。如果将剪切的容器设为同级元素并将其设置为 

position: absolute;
，它将位于所有内容的后面。为此，您需要使标题元素（具有红色和蓝色背景）具有 
position: relative;
。

我还注意到，您的 

.image
div 占据了整个高度，这就是当内容位于剪切容器内时您看不到的内容。

body {
  font-family: "Anonymous Pro", monospace;
  font-weight: 400;
  font-size: 16px;
  line-height: 1, 7;
  color: #777;
  padding: 30px;
}

header {
  background-image: linear-gradient(180deg, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(0, 15, 240, 1) 50%, rgba(0, 15, 240, 1) 100%);
}

.header-wrapper {
  height: 80vh;
  background-image: radial-gradient( circle at 18.7% 37.8%, rgb(238, 226, 226) 0%, rgb(211, 219, 223) 90%);
  clip-path: polygon(100% 11%, 100% 77%, 0 100%, 0 0);
  backface-visibility: hidden;
  background-position: top;
  color: black;
  position: relative;
  animation-name: movefromright;
  animation-duration: 1.7s;
  animation-timing-function: ease-out;
}

.image {
  background-image: url(img/logo2.png);
  height: 80vh;
  position: relative;
  background-size: cover;
  background-position: top;
  backface-visibility: hidden;
  animation-name: movefromleft;
  animation-duration: 1.7s;
  animation-timing-function: ease-out;
}
<header>
  <div class="header-wrapper">
    <div class="image"></div>
    <div class="text-box">
      <div class="header-button">
        <a href="#zawartosc" class="btn btn-blue">Przejdź dalej</a>
      </div>
    </div>
  </div>
</header>

在没有看到完整的设计并了解其工作原理的情况下，我不确定能否给您更好的答案，但这应该可以满足您的需求。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.