어떻게 전용 "다각형"를 사용하지 않고 컨테이너 내에서 '임무'섹션의 삼각형 레이아웃을받는 방법

Question

"다각형"를 사용하지 않고 삼각형 레이아웃을 얻을 수 있습니다. 나는 그것이 컨테이너 바깥으로 흐르길 원하지 않는다.

Answer 1

border css 속성을 사용하여 삼각형을 만들 수 있습니다. 더 모양이 링크 밖으로

는

확인 : https://css-tricks.com/examples/ShapesOfCSS/

.container { 
 
    position: relative; 
 
} 
 
.mission { 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 0px solid transparent; 
 
    border-right: 100px solid transparent; 
 
    border-top: 150px solid red; 
 
    border-bottom: 0px solid transparent; 
 
} 
 

 
.mission + div { 
 
    position: absolute; 
 
} 
 

 
.content { 
 
    position: absolute; 
 
    width: 350px; 
 
    height: 200px; 
 
    background: lightgrey; 
 
    padding-left: 100px; 
 
}

<div class="container"> 
 
    <div class="content"> 
 
    Content 
 
    </div> 
 
    <div class="mission"> 
 
    </div> 
 
    <div> 
 
    Mission 
 
    </div> 
 
</div>