테두리 색상이없는 사다리꼴

Question

CSS에 두 개의 사다리꼴을 만들고 싶습니다. 테두리 배경색을주고 싶기 때문에 테두리 색을 사용할 수 없습니다. 모든 것이 그 그림을 설명해야합니다. 두 div 텍스트를 넣어 것입니다.

어떻게 html, css, js, svg을 사용할 수 있습니까?

http://iv.pl/images/82062332573614452824.jpg http://iv.pl/images/32788252576166741527.jpg

Answer 1

당신은 :after 의사 요소의 사용을 통해 순수 CSS에서이 작업을 수행 할 수 있습니다.

기본적으로 두 개의 직사각형을 만들었습니다. 그럼 난 :after 의사 요소를 통해 추가 된 오른쪽 사각형에 삼각형을 입혔다.

jsFiddle example는 - 같은

HTML

<div id="wrap"> 
    <div id="one"></div> 
    <div id="two"></div> 
</div> 

CSS 대신 두 가지 색상의

div { 
    float: left; 
    position: relative; 
    height: 100px; 
} 

#one { 
    background: green; 
    width: 130px; 
} 

#two { 
    background: red; 
    width: 70px; 
} 

#two:after { 
    content: "\A"; 
    border-top: 100px solid transparent; 
    border-bottom: 60px solid transparent; 
    border-right: 45px solid red; 
    position: absolute; 
    left: -45px; 
} 

#wrap { 
    overflow: hidden; 
}