Wavy/Curvy Module의

Question

현재 텍스트 모듈, 이미지 모듈, 2 열 모듈이있는 모듈 식 디자인의 웹 사이트에서 작업하고 있습니다. 사용자는 원하는대로 추가/제거/재정렬 할 수 있습니다.

는 CSS로 이런 일을 할 수 있나요 :

각 모듈은 물결 모양/매력적인 테두리가?

각 모듈은 중복 것입니다 : 내가 생각 해낸

한 솔루션 사업부 이전과 이후 모듈을 물결 모양/매력적인 배경 이미지를 제공하고 그들에게 부정적인 마진을 제공했지만 곧 깨달았 이미지 모듈과 함께 작동하지 않을 것입니다 :

.module.style-2 { 
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC7gAAAABAQMAAAB0GXF9AAAABlBMVEX////09PQtDxrOAAAAD0lEQVQY02P4PygBw3AHAG6mlWu52WYpAAAAAElFTkSuQmCC'); 
    background-repeat: repeat-y; 
    background-position: 40% 0; 
} 

.module.style-2:before { 
    height: 100px; 
    width: 100%; 

    margin-top: -100px; 
    position: absolute; 
    content: ''; 
    background-image: url('top-curvy-background-1.png'); 
    background-repeat: no-repeat; 
    background-position: 40% 0; 
} 

.module.style-2:after { 
    height: 150px; 
    width: 100%; 

    position: absolute; 
    content: ''; 
    background-image: url('bottom-curvy-background-1.png'); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-position: 40% 0; 
} 

CodePen

감사 내가 탐구 가치가 3 가지 방법을 참조 도움

Answer 1

에 대한 S :

1. CSS를이 클립 경로 mozilla, css-tricks라는 속성입니다. 이것을 사용하여 비표준 컨테이너를 사용할 수 있습니다.

2. SVG, 특히 그러나 두 개의 이미지 모듈은 자기 그들에 첨부되지 않았습니다 규칙을, 더 많은 유연성 당신에게 mozilla

3. 를 사용하여 미리 정의 된 배경을 줄 수도 clipPath 태그. 이 방법을 사용하면 평범한 색상 모듈에 대해 항상 z-index를 사용할 수 있으므로 사실상 배경에 의해 이미지가 잘릴 수 있습니다. svg를 사용하여 그 모양을 html/css 레벨에서 관리 할 수있을뿐만 아니라 작게 만들 수도 있습니다 (새 모양을 동적으로 만들 수 있음).

행운과 당신이 결정 무엇을 말해 클립 경로와