Shaped фон

-2

Я хотел бы сделать некоторые фоновые фигуры на моем сайте ...Shaped фон

Я попытался с помощью метода с повернутыми/перекосом прямоугольниками, он отлично работает только тогда, когда у меня есть только один цвет в разделе ниже (потому что я могу использовать один и тот же цвет для фигур). Если я хочу использовать текстуру, как в прикрепленном изображении, я получаю this в зависимости от того, какой метод я использую. Я также пытался использовать svg для создания фигур, но я не уверен, что это лучшее решение. Мне интересно, есть ли умный способ сделать это. Я понимаю, может быть, я не настолько ясен, как должен, но спасибо, что нашли время, чтобы прочитать это.

источник

2016-08-22 ravy

Это два белых блок с 'преобразование: skewY()' и 'позиции: absolute' –

Это концепция. Попробуйте самостоятельно работать над проектом.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.wrapper { 
 
    width: 100vw; 
 
    padding-top: 50%; 
 
    position: relative; 
 
    background-image: linear-gradient(90deg, rgba(0, 0, 0, .5) 66.6666667%, rgba(255, 255, 0, .6) 66.6666667%), url(http://beerhold.it/1200/600); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    overflow: hidden; 
 
} 
 

 
.wrapper:nth-child(2) { 
 
    background-image: linear-gradient(90deg, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, .7) 100%), url(http://beerhold.it/1400/700); 
 
    } 
 

 
.topleft, 
 
.topright, 
 
.bottomleft, 
 
.bottomright { 
 
    position: absolute; 
 
    top: 0; 
 
    height: 100%; 
 
} 
 
.topleft { 
 
    left: 0; 
 
    top: 40%; 
 
    width: 66.66666667%; 
 
    background-image: linear-gradient(transparent 0, transparent 50%, #fff 50%, #fff); 
 
    transform: skewY(7deg); 
 
} 
 
.topright { 
 
    left: 66.66666667%; 
 
    width: 33.33333334%; 
 
    top: 42.3%; 
 
    background-image: linear-gradient(transparent 0, transparent 50%, #fff 50%, #fff); 
 
    transform: skewY(-10deg); 
 
} 
 

 
.bottomleft { 
 
    left: 0; 
 
    top: -94%; 
 
    width: 33.33333334%; 
 
    background-image: linear-gradient(180deg, transparent 0, transparent 50%, #fff 50%, #fff); 
 
    transform: skewY(-10deg); 
 
} 
 
.bottomright { 
 
    left: 33.33333334%; 
 
    width: 66.66666667%; 
 
    top: -92%; 
 
    background-image: linear-gradient(180deg, transparent 0, transparent 50%, #fff 50%, #fff); 
 
    transform: skewY(7deg); 
 
}

<div class="wrapper"> 
 
    <div class="topleft"></div> 
 
    <div class="topright"></div> 
 
</div> 
 

 
<div class="wrapper"> 
 
    <div class="topleft"></div> 
 
    <div class="topright"></div> 
 
    <div class="bottomleft"></div> 
 
    <div class="bottomright"></div> 
 
</div>

источник

2016-08-22 11:37:57

Большого спасибо за ваше время. Я очень ценю это. Это интересное решение, немного отличное от того, что я сделал. Однако, возможно, я что-то пропустил, но моя первоначальная проблема заключалась в том, что мне нужно использовать текстуру в разделах ниже основного изображения, которое имеет формы. И из-за этого эти белые фигуры должны быть прозрачными или я не знаю, может быть, это лучшее решение, которое я не вижу ... Я прикрепил ссылку, не уверен, понимаете ли вы, что я пытаюсь сказать здесь. Есть ли способ сделать это? https://www.dropbox.com/s/0zwyn4dwvbex37h/test03.jpg?dl=0 Большое спасибо за ваше время! – ravy

Я обновил свой ответ. –

не уверен, закончили ли вы, но вот что я говорю, что он должен быть прозрачным. Еще раз спасибо! https://www.dropbox.com/s/2fz1d3d833oh5gz/test04.jpg?dl=0 – ravy

Вы, вероятно, хотите поэкспериментировать с SVGs и масок, в зависимости от того, насколько сложны ваши формы будут. Здесь вы можете найти отличные рекомендации: https://www.sitepoint.com/masking-in-the-browser-with-css-and-svg/.

Иллюстратор можно сохранить как SVG, но если вы используете Sketch, это еще проще! Вы заметите, что код выводит отдельные координаты.

Вы можете видеть приличную демку здесь: http://cssplant.com/clip-path-generator

источник

2016-08-22 22:31:53

Вы также можете обманывать и использовать белые треугольные .png файлы, наложенные, абсолютно позиционированные в нижнем правом углу, чтобы создать фанки обрезки. Это гораздо более простое решение, хотя, очевидно, добавит вес вашему телу. –

Привет! Спасибо за идеи и за ваше время. Я дам вам знать, работают ли маски для меня. Белый трюк png не работает, потому что мне не нужны белые треугольники. (Я пытался лучше объяснить в своем вопросе) – ravy

ответ

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