내가 왜곡/회전 사각형과 방법을 사용하여 시도</p> <p><a href="http://i.stack.imgur.com/bBJIm.jpg" rel="nofollow">this is the look that I want</a></p> <p>배경

Question

내 웹 사이트에 몇 가지 배경 모양을하고 싶습니다

는 ..., 그것은 완벽하게 작동하는 모양 (같은 모양을 사용할 수 있기 때문에) 아래 섹션을 참조하십시오. 이미지 첨부와 같은 질감을 사용하고 싶다면 사용 방법에 따라 this이됩니다. 나는 또한 셰이프를 만들기 위해 svg를 사용해 보았지만 최상의 솔루션인지 확실하지 않습니다. 이 일을하는 영리한 방법이 있는지 궁금합니다. 아마도 내가해야 할만큼 명확하지 않을 수도 있지만, 이것을 읽을 시간을 찾은 것에 감사드립니다.

Answer 1

이것은 개념입니다. 프로젝트를 위해 스스로 노력하십시오.

* { 
 
    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>

Answer 2

당신은 아마 당신의 모양이 될 방법 복잡한에 따라 SVGs 및 마스크 실험 할 수 있습니다. 여기에 큰 지침이 있습니다 : https://www.sitepoint.com/masking-in-the-browser-with-css-and-svg/.

일러스트 레이터는 SVG로 저장할 수 있지만 스케치를 사용하는 경우 훨씬 쉽습니다! 코드 출력에 개별 좌표가 있음을 알 수 있습니다.

당신은 여기 괜찮은 데모를 볼 수 있습니다으로 http://cssplant.com/clip-path-generator