CSS 中角度一致的三角形边

Question

我必须编写这样的设计代码：

如图所示，我做了所有的事情，但是我运行遇到了问题。 这个多边形的角度随着屏幕尺寸的变化而变化，但我需要它与六边形徽标的角度保持一致。我尝试了几种方法，例如将三角形 PNG 作为页眉的背景图像 - 角度是一致的，但边框在大屏幕上太大而在小屏幕上太小，我需要边框大小在所有屏幕尺寸上保持一致 (50px)。

希望有人能提供帮助。如果您有比使用 clip-path 更好的方法，我也愿意接受该解决方案！ Tips: Pattern(background-image)尺寸固定，Logo尺寸固定，Border尺寸固定，唯一需要缩放的是角度一致的多边形。

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

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

而不是 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 每个渐变创建的角度，我们将得到 sin(A) = 875px/1500px = 0.583，这将给我们一个 35.685deg 的角度. Increase/deacrese 控制角度的值。保持相同的比例以保持相同的角度。只需确保 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: I add/remove 1px 或较小的百分比值以避免在渐变上出现锯齿状边缘}

CSS 中角度一致的三角形边

Triangle edges with consistent angle in CSS

html

css

border

css-shapes

clip-path