Края треугольника с постоянным углом в CSS - PullRequest
Новая
       13

Края треугольника с постоянным углом в CSS

2 голосов
/ 10 марта 2020

Мне нужно написать такой код:

CSS triangles with consistent angle Я сделал все, как показано на рисунке, но столкнулся с проблемой. Угол этого многоугольника изменяется при изменении размера экрана, но мне нужно, чтобы он был постоянным, чтобы соответствовать углу шестиугольника lo go. Я пробовал несколько вещей, таких как установка треугольника PNG в качестве заголовка. фоновое изображение - угол постоянен, но на больших экранах граница становится слишком большой, а на меньших - слишком маленькой, и мне нужно, чтобы размер границы был одинаковым для всех размеров экрана (50 пикселей).

Надеюсь, кто-то может помочь. Если у вас есть лучший способ, чем использовать clip-path, я открыт для этого решения! Советы: фиксированный размер шаблона (фонового изображения), фиксированный размер Lo go, фиксированный размер границы, единственное, что должно масштабироваться, - это многоугольник с постоянным углом.

Код ниже соответствует ширине экрана 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>

1 Ответ

2 голосов
/ 10 марта 2020

Вместо 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. Увеличьте / деактивируйте значения, чтобы контролировать угол. Сохраняйте одинаковое соотношение, чтобы сохранить одинаковый угол. Просто убедитесь, что ширина, определяемая 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: Использование процентных значений с background-position на линейном градиенте

PS: я добавляю / удаляю 1px или небольшое значение в процентах, чтобы избежать зазубренных краев на градиентах

...