Полная ширина перекрытия треугольников

В настоящее время я должен сделать что-то с помощью CSS, который будет выглядеть следующим образом:Полная ширина перекрытия треугольников

мне удалось это сделать с этим:

.top { 
 
    position: relative; 
 
} 
 
.top .gray-bar { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #cdcbcc; 
 
    -ms-transform: rotate(1.2deg); 
 
    transform: rotate(1.2deg); 
 
    margin-top: -25px; 
 
    z-index: 2; 
 
} 
 
.top .cyan-bar { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 90px; 
 
    background-color: #2ca1ab; 
 
    -ms-transform: rotate(-3deg); 
 
    transform: rotate(-3deg); 
 
    z-index: 1; 
 
    margin-top: -30px; 
 
    margin-left: -400px; 
 
} 
 
.top .purple-bar { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #b71e4c; 
 
    -ms-transform: rotate(0.7deg); 
 
    transform: rotate(0.7deg); 
 
    margin-top: -5px; 
 
    z-index: 0; 
 
}

<div class="top"> 
 
    <div class="gray-bar"></div> 
 
    <div class="cyan-bar"></div> 
 
    <div class="purple-bar"></div> 
 
</div>

Однако, когда я изменяю размер окна, в некоторый момент времени «голубой» треугольник вызывает проблему из-за поля и поворот. Поэтому я добавил некоторые медиа-запросы, чтобы изменить угол поворота в зависимости от ширины экрана, но я чувствую, что он немного «играет» и что есть лучшее решение для достижения этого.

Я попытался использовать границы, чтобы сделать перекрывающиеся треугольники, но поскольку он не может быть выражен в процентах, я немного застрял. В самом деле, цель состоит в том, что результат выглядит примерно так же, как разрешение экрана пользователя.

Есть ли лучшее решение, чем мое?

источник

2016-02-23 ssougnez

Я, хотя об этом, и я хотел избежать этого, чтобы делать все в CSS, но, возможно, это лучшее решение. Мне просто интересно, есть ли простой способ сделать это только с помощью CSS. И если я это сделаю, значит, изображение должно быть очень широким, я думаю? – ssougnez

Учитывая, что элемент .top использует полную ширину видового экрана, вы можете использовать viewport percentage units для границ. Это сделает треугольники относительно ширины окна просмотра.
Смотрите этот пример с одного DIV:

body,html{margin:0;padding:0;} 
 

 
.topBar{ 
 
    position:relative; 
 
    height:35px; 
 
    border-bottom:30px solid transparent; 
 
    border-right:100vw solid #B71E4C; 
 
} 
 
.topBar:before, .topBar:after{ 
 
    content:''; 
 
    position:absolute; 
 
    top:0; left:0; 
 
    height:15px; 
 
} 
 
.topBar:before{ 
 
    border-bottom:50px solid transparent; 
 
    border-left:100vw solid #2CA1AB; 
 
} 
 
.topBar:after{ 
 
    border-bottom:40px solid transparent; 
 
    border-right:100vw solid #CDCBCC; 
 
}

<div class="topBar"></div>

источник

2016-02-23 08:43:43

Ничего себе, удивительный, не знал об этом блоке «vw». Я сразу прочитаю об этом, спасибо большое ;-) – ssougnez

У вас есть идея, почему есть горизонтальная полоса прокрутки с IE? – ssougnez

@ssougnez убедитесь, что все родители (до тега '') не имеют поля, границы или отступов. Я не могу тестировать IE, но это единственная очевидная причина, о которой я могу думать. –

Может быть, это поможет вам, но, @ веб-Тики его лучшее решение, используя псевдо-селекторы: :before & :after

.top { 
 
    overflow: hidden; 
 
    height: 90px; 
 
} 
 
.top .gray-bar { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color:#cdcbcc; 
 
    -ms-transform: rotate(1.3deg); 
 
    transform: rotate(1.3deg); 
 
    margin-top:-35px; 
 
    z-index: 2; 
 
} 
 

 
.top .cyan-bar { 
 
    position: relative; 
 
    width: 150%; 
 
    height: 50px; 
 
    background-color:#2ca1ab; 
 
    -ms-transform: rotate(-2deg); 
 
    transform: rotate(-2deg); 
 
    z-index:1; 
 
    top: -5px; 
 
    margin-top:-30px; 
 
    margin-left:-100px; 
 
} 
 

 
.top .purple-bar { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 20px; 
 
    background-color:#b71e4c; 
 
    -ms-transform: rotate(0.7deg); 
 
    transform: rotate(0.7deg); 
 
    margin-top: -20px; 
 
    z-index:0; 
 
}

<div class="top"> 
 
    <div class="gray-bar"></div> 
 
    <div class="cyan-bar"></div> 
 
    <div class="purple-bar"></div> 
 
</div>

источник

2016-02-23 08:47:02 Ferrrmolina

Полная ширина перекрытия треугольников

ответ

Смежные вопросы