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

Question

我必须编写这样的设计:


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

希望有人可以提供帮助。如果您有比使用剪辑路径更好的方法，我也愿意接受该解决方案! Tips:图案(背景-图片)尺寸固定，Logo尺寸固定，Border尺寸固定，唯一需要缩放的是 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

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

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这会给我们一个 Angular 35.685deg .增加/减少值以控制 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或较小的百分比值以避免在渐变上出现锯齿状边缘