在CSS中具有一致角度的三角形边缘

Question

我必须编码这样的设计：

我按照图片所示进行了所有操作，但是遇到了问题。 [多边形的角度随着屏幕尺寸的变化而变化，但是我需要使其与六边形徽标的角度保持一致。我尝试了几种方法，例如将三角形PNG用作标题的背景图像-角度是一致的，但是在较大的屏幕上边框变得太大而在较小的屏幕上边框变得太小，因此我需要边框大小在所有屏幕尺寸上都保持一致（50像素）。

希望有人可以提供帮助。如果您有比使用剪切路径更好的方法，那么我也欢迎该解决方案！ 提示：图案（背景图像）大小是固定的，徽标大小是固定的，边框大小是固定的，唯一应该缩放的是具有一致角度的多边形。

下面的代码与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

而不是clip-path，我会考虑使用具有渐变的蒙版来固定角度。技巧是使用固定的大值，然后将渐变围绕中心放置以具有相同的角度。

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

header {
  background: #FFF;
  -webkit-mask:
    linear-gradient(#fff,#fff) top/100% calc(100% - 700px),
    linear-gradient(to bottom left ,#fff 49.8%,transparent 50%)
     bottom 0 right calc(50% + 600px)/1201px 700px,
    linear-gradient(to bottom right,#fff 49.8%,transparent 50%)
     bottom 0 left  calc(50% + 600px)/1201px 700px;
  -webkit-mask-repeat:no-repeat;
  mask:
    linear-gradient(#fff,#fff) top/100% calc(100% - 700px),
    linear-gradient(to bottom left ,#fff 49.8%,transparent 50%)
     bottom 0 right calc(50% + 600px)/1201px 700px,
    linear-gradient(to bottom right,#fff 49.8%,transparent 50%)
     bottom 0 left  calc(50% + 600px)/1201px 700px;
  mask-repeat:no-repeat;
  height: 850px;
}

.clipped {
  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,
    #99ffe7;
  background-repeat:no-repeat;
  height: 800px;
  position: relative;
}

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