CSS3에 오목면이있는 사다리꼴을 만드는 방법은 무엇입니까?

Question

하나의 오목면이있는 사다리꼴을 만들려고합니다.

크로스 브라우저 호환 및 응답 성이 뛰어난 CSS3 솔루션을 선호합니다.

이 솔루션은 내 솔루션과 매우 유사한 솔루션을 제공하는 post입니다. 그러나 필자는 제공된 솔루션 에서처럼 둥근 것이 아닌 오목 측면을 선호합니다. 지금까지는 달성 할 수 없었습니다.

모양을 통해 빛나야하는 모양 뒤에 이미지를 넣고 싶기 때문에 모양이 알파 채널 (rgba)을 지원한다는 것이 매우 중요합니다. 로 보일 것입니다

이 솔루션은 다음과 : 당신은 원하는 크기의 사각형을 만들 div을 사용할 수 있습니다

Answer 1

. div을 position: relative 및 overflow: hidden으로 설정하십시오.

그런 다음 position: absolute 및 불투명 box-shadow 인 의사 요소를 사용하십시오.

#container{ 
 
    width: 400px; 
 
    height: 200px; 
 
    background-image: url("http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg"); 
 
    padding: 50px; 
 
} 
 
#trapezoide{ 
 
    position:relative; 
 
    overflow: hidden; 
 
    
 
    /* Play with this properties to achieve the trapezoide just like you want. */ 
 
    height: 100px; 
 
    width: 300px; 
 
} 
 

 
#trapezoide:before{ 
 
    content: ""; 
 
    border-radius: 50%; 
 
    transform: translate(50%, -50%); 
 
    position: absolute; 
 
    box-shadow: 0 0 0 500px black; 
 
    
 
    /* Play with this properties to achieve the trapezoide just like you want. */ 
 
    width: 800px; 
 
    height: 800px; 
 
    top: -288px; 
 
    right: -100px; 
 
}

<div id="container"> 
 
    <div id="trapezoide"></div> 
 
</div>

당신이 원하는 바로 볼 trapezoide를 만들기 위해 표시된 속성을 조정합니다.