CSS로 삼각형안에 이미지 넣기

CSS를 이용해 삼각형안에 이미지 넣는 방법에 대해 적어봅니다. 

간단히 설명하면

border를 이용해 삼각형을 만들고, 그 뒤에 background-image를 통해 이미지를 넣는 방식입니다.

완성 샷!

 

조금 무섭긴 한데, css로 세모안에 원숭이 이미지를 넣어봤습니다.

 

html

<div class="triangle"></div>
 

css

.triangle{
    width: 0;
    height: 0;
    border-left: 100px solid #fff;
    border-right: 100px solid #fff;
    border-bottom: 200px solid transparent;
    z-index: 1;
    }
.triangle::after{    
    width: 200px;
    height: 200px;
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2017/07/13/16/07/monkey-2500919_960_720.jpg);
    position: absolute;
    z-index: -3;
    left: 8px;
}

border의 크기를 왼쪽(left)과 오른쪽(right)를 아래(bottom)의 반정도 크기로 만들어주고, 흰색으로 변경해서 마치 세모처럼 보이도록 만들었어요.

그리고 border-bottom의 색상을 투명으로 해서, 뒤에 배경이미지가 보이도록 했어요.

또한 z-index로 배경이미지가 뒤로 가도록 해줬어요!

 

 

만약 백그라운드 이미지가 안나온다면 아래의 글보면서 어떤점에서 실수가 있었는지 체크해보아용.

2020/07/29 - [퍼블리싱/HTML&CSS] - [CSS]background-image 안나올때

[CSS]background-image 안나올때