Как вы стилизуете треугольную маску в CSS?

Я искал, как сделать этот «обратный треугольный» фон с помощью css. Я имею в виду белые диагональные части внизу и вверху фонового (фиксированного) изображения.

Максимум, что я получил, — это формы, которые, по-видимому, не являются хорошим решением, учитывая, что они предназначены для отзывчивого дизайна. Меня не волнует, что когда окно уже, есть только одна диагональ, пока нет горизонтальной прокрутки. Но формы и его абсолютная ширина все портят.

Прошу прощения, если это глупо/распространенно/часто задаваемые вопросы. Я не смог найти его, скорее всего, из-за отсутствия технического термина. Большое тебе спасибо :)

РЕДАКТИРОВАТЬ: страница продолжает прокручиваться вниз! Под диагоналями/треугольниками находится контент. Треугольники не внизу страницы.

введите здесь описание изображения


css background geometry diagonal
person antonio1475    schedule 03.06.2014    source источник
comment
Создать образ в этом стиле и применить его?   -  person Afzaal Ahmad Zeeshan    schedule 03.06.2014
comment
Да, это мое решение для резервного копирования, но я предполагаю, что есть чистый вариант css? (хочу научиться). :)   -  person antonio1475    schedule 03.06.2014
comment
вы, вероятно, можете как-то сделать это с SVG, но я сомневаюсь, что это возможно с простым css   -  person MightyPork    schedule 03.06.2014
comment
Спасибо @MightyPork. Я склонен переоценивать возможности CSS и HTML. Тогда я пойду с изображением. :)   -  person antonio1475    schedule 03.06.2014
comment
Ну, вы можете встроить SVG на страницу, это работает очень хорошо. Но я не особо знаком с SVG, т.е.   -  person MightyPork    schedule 03.06.2014
comment
О, хорошо, тогда я попробую способ SVG! Спасибо :)   -  person antonio1475    schedule 03.06.2014

Ответы (3)


arrow_upward
2
arrow_downward

Вот скрипт с чем-то похожим и отзывчивым: http://jsfiddle.net/BLbu5/

HTML:

<body>
<div id="triangle-holder">
<div id="triangle-1"></div>
<div id="triangle-2"></div>
</div>
</body>

CSS:

body {
background-image: url('http://miriadna.com/desctopwalls/images/max/Ideal-landscape.jpg');
margin: 0;
padding: 0; 
}

#triangle-1 { 
width: 0; 
height: 0; 
border-bottom: 30vw solid red; 
border-right: 100vw solid transparent;
float: left;
}

#triangle-2 { 
width: 0; 
height: 0; 
border-bottom: 30vw solid red; 
border-left: 100vw solid transparent; 
}

 #triangle-holder {
position: absolute;
bottom: 0;
}

Подробнее об этой технике читайте здесь: https://css-tricks.com/examples/ShapesOfCSS/

Надеюсь, что это работает!

person oneday    schedule 03.06.2014
comment
Благодарю вас! Это работает именно так, как я хочу. Поскольку под треугольниками находится содержимое, я просто удалил свойства держателя треугольника. Есть небольшая горизонтальная прокрутка, которую я должен исправить. Большое спасибо, сэр! - person antonio1475; 04.06.2014
comment
Я думаю, что небольшую горизонтальную прокрутку можно исправить, задав overflow-x: hidden на теле. Рад помочь! - person oneday; 04.06.2014
comment
@antonio1475, если этот зигзагообразный вывод может вас удовлетворить, вы можете попробовать этот подход, используя многофоновую функцию jsfiddle.net/viphalongpro/UfSkS/2 Для высококачественных краев (сглаженных краев), я думаю, есть только 1 решение с использованием какого-либо элемента для покрытия фонового изображения , этот элемент должен быть преобразован для создания диагональных плоскостей, вот еще одно решение этого подхода jsfiddle.net/UfSkS/3 - person King King; 04.06.2014

arrow_upward
1
arrow_downward

Вы достигли бы того же результата с «фоновым изображением» со следующим стилем:

#bg{
    position: fixed;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    z-index:-1;
    -webkit-clip-path: polygon(
        0 50%, 45% 90%, 100% 50%, 100% 0, 0 0
    );
    -moz-clip-path: polygon(
        0 50%, 45% 90%, 100% 50%, 100% 0, 0 0
    );
    -ms-clip-path: polygon(
        0 50%, 45% 90%, 100% 50%, 100% 0, 0 0
    );
    clip-path: polygon(
        0 50%, 45% 90%, 100% 50%, 100% 0, 0 0
    );
}

и в html вы бы добавили:

<img id = 'bg' src = 'path.jpg'> </img>
person touko    schedule 03.06.2014
comment
Спасибо. Я вижу, как это работает. Однако я не упомянул, что страница продолжает прокручиваться вниз. Я думаю, что ваше решение устанавливает треугольники внизу страницы. - person antonio1475; 04.06.2014
comment
не имеет значения, потому что в стиле указано position: fixed; jsfiddle.net/9qn64, например - person touko; 04.06.2014

arrow_upward
0
arrow_downward

Я бы порекомендовал использовать html-холст и либо прямоугольник с треугольной областью обрезки, либо два перевернутых прямоугольных треугольника, расположенных у нижних краев.

Для этого потребуется javascript.

Помимо этого, вы можете использовать некоторые приемы CSS, такие как: http://jsfiddle.net/pgLP2/

Это было бы не очень элегантно, так как потребовало бы ручного управления позициями и размерами.

HTML:

<div class="content">Some Content</div>
<div id="toptriangle"></div>

CSS:

body {
    color: white;
    background-color: #666666;
}

.content {
    text-align: center;
}

#toptriangle {
    position: relative;
    width: 0px;
    height: 0px;
    top: 100px;
    left: -10px;
    border-right: 500px solid white;
    border-top: 300px solid transparent;
    border-left: 500px solid white;
    border-bottom: 400px solid white;
}
person Keith Hill    schedule 03.06.2014