html - CSS 中 Angular 一致的三 Angular 形边

Question

我必须编写这样的设计:

我按照图片所示做了所有事情，但遇到了问题。 当屏幕尺寸改变时，这个多边形的 Angular 也会改变，但我需要它保持一致，以匹配六边形 Logo 的 Angular 。我尝试了几种方法，例如将三 Angular 形 PNG 作为标题的背景图像- Angular 是一致的，但边框在较大的屏幕上变得太大，而在较小的屏幕上太小，我需要边框尺寸在所有屏幕尺寸上保持一致(50px)。

希望有人能帮忙。如果您有比使用剪辑路径更好的方法，我也愿意接受该解决方案! 提示:图案(背景图像)大小是固定的，Logo 大小是固定的，边框大小是固定的，唯一应该缩放的是 Angular 一致的多边形。

下面的代码匹配 1920px 屏幕尺寸宽度。

body {
  background-color: #6e4d3c;
  margin: 0;
  padding: 0;
}

header {
  background: #FFF;
  height: 850px;
  clip-path: polygon(
    0 0, /* left top */
    100% 0, /* right top */ 
    100% 300px, /* right bottom */
    50% 100%, /* center */
    0 300px  /* left bottom */
  );  
}

.clipped {
  background: #99ffe7 url(http://i.pics.rs/70hBA.png) no-repeat top center;
  height: 800px;
  position: relative;
  clip-path: polygon(
    0 0, /* left top */
    100% 0, /* right top */ 
    100% 250px, /* right bottom */
    50% 100%, /* center */
    0 250px  /* left bottom */
  );
}

#logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 340px;
}

    <header> <!-- serves as the white border -->
      <div class="clipped">
        <img id="logo" src="http://i.pics.rs/M7gQb.png" alt="Logo">
      </div>
    </header>

Answer 1

我会考虑使用具有相同 Angular 渐变蒙版，而不是clip-path。诀窍是使用固定的大值并将渐变放置在中心周围。

body {
  background-color: #6e4d3c;
  margin: 0;
}

header {
  -webkit-mask:    
    linear-gradient(to bottom left ,#fff 49.8%,transparent 50%) bottom 0 right calc(50% + 750px),
    linear-gradient(to bottom right,#fff 49.8%,transparent 50%) bottom 0 left  calc(50% + 750px);
  -webkit-mask-size:1501px 875px;
  -webkit-mask-repeat:no-repeat;
  mask:
    linear-gradient(to bottom left ,#fff 49.8%,transparent 50%) bottom 0 right calc(50% + 750px),
    linear-gradient(to bottom right,#fff 49.8%,transparent 50%) bottom 0 left  calc(50% + 750px);
  mask-size:1501px 875px;
  mask-repeat:no-repeat;
  height: 700px;
  
  /* I use a similar gradient here to create the border effect */
  background: 
    linear-gradient(to bottom left ,transparent calc(50% - 50px),#fff calc(50% - 49px))
     bottom 0 right calc(50% + 750px)/1501px 875px,
    linear-gradient(to bottom right,transparent calc(50% - 50px),#fff calc(50% - 49px))
     bottom 0 left  calc(50% + 750px)/1501px 875px,
    url(http://i.pics.rs/70hBA.png) top/cover
    #99ffe7;
  background-repeat:no-repeat;
  display:flex;
}

#logo {
  width: 340px;
  margin:auto;
}

<header>
    <img id="logo" src="http://i.pics.rs/M7gQb.png" alt="Logo">
</header>

这有点棘手，但这里是单独作为背景的渐变的说明，以便您可以更好地理解正在发生的情况:

body {
  background-color: #6e4d3c;
  margin: 0;
  padding: 0;
}

header {
  background:
    linear-gradient(to bottom left ,green 49.8%,transparent 50%) bottom 0 right calc(50% + 750px),
    linear-gradient(to bottom right,blue  49.8%,transparent 50%) bottom 0 left  calc(50% + 750px);
  background-size:1501px 875px;
  background-repeat:no-repeat;

  height: 700px;
}

<header>
  
</header>

颜色是元素的可见部分，如果我们可以考虑A每个渐变创建的 Angular ，我们将得到sin(A) = 875px/1500px = 0.583 这将为我们提供 35.685deg 的 Angular 。增加/减少值以控制 Angular 。保持相同的比例以保持相同的 Angular 。只需确保 1500px 定义的宽度足以让渐变覆盖整个屏幕，并且 875px 定义的高度足以覆盖元素的高度:

使用较小的值会得到这样的结果:

body {
  background-color: #6e4d3c;
  margin: 0;
}

header {
  -webkit-mask:
    linear-gradient(to bottom left ,#fff 49.8%,transparent 50%) bottom 0 right calc(50% + 60px),
    linear-gradient(to bottom right,#fff 49.8%,transparent 50%) bottom 0 left  calc(50% + 60px);
  -webkit-mask-size:121px 70px;
  -webkit-mask-repeat:no-repeat;
  mask:
    linear-gradient(to bottom left ,#fff 49.8%,transparent 50%) bottom 0 right calc(50% + 60px),
    linear-gradient(to bottom right,#fff 49.8%,transparent 50%) bottom 0 left  calc(50% + 60px);
  mask-size:121px 70px;
  mask-repeat:no-repeat;
  height: 800px;
  
  background: 
    linear-gradient(to bottom left ,transparent 48%,#fff 48%)
     bottom 0 right calc(50% + 600px)/1201px 700px,
    linear-gradient(to bottom right,transparent 48%,#fff 48%)
     bottom 0 left  calc(50% + 600px)/1201px 700px,
    url(http://i.pics.rs/70hBA.png) top/cover,
    #99ffe7;
  background-repeat:no-repeat;
  display:flex;
}

#logo {
  width: 340px;
  margin:auto;
}

<header>
    <img id="logo" src="http://i.pics.rs/M7gQb.png" alt="Logo">
</header>

这里有一个相关问题，可获取有关 background-size/background-position 计算的更多详细信息:Using percentage values with background-position on a linear-gradient

---

^{PS:我添加/删除 1px 或一个较小的百分比值，以避免渐变上出现锯齿状边缘}