CSS를 이용해 삼각형안에 이미지 넣는 방법에 대해 적어봅니다.
간단히 설명하면
border를 이용해 삼각형을 만들고, 그 뒤에 background-image를 통해 이미지를 넣는 방식입니다.
완성 샷!
조금 무섭긴 한데, css로 세모안에 원숭이 이미지를 넣어봤습니다.
html
1
2
|
<div class="triangle"></div>
|
cs |
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.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;
}
|
cs |
border의 크기를 왼쪽(left)과 오른쪽(right)를 아래(bottom)의 반정도 크기로 만들어주고, 흰색으로 변경해서 마치 세모처럼 보이도록 만들었어요.
그리고 border-bottom의 색상을 투명으로 해서, 뒤에 배경이미지가 보이도록 했어요.
또한 z-index로 배경이미지가 뒤로 가도록 해줬어요!
만약 백그라운드 이미지가 안나온다면 아래의 글보면서 어떤점에서 실수가 있었는지 체크해보아용.
2020/07/29 - [퍼블리싱/HTML&CSS] - [CSS]background-image 안나올때
'퍼블리싱 > HTML&CSS' 카테고리의 다른 글
[CSS/JQUERY] 풀스크린 메뉴( 화면 꽉찬 메뉴) 만들기 (0) | 2020.09.03 |
---|---|
CSS 적용 우선 순위 및 !important 사용법 (0) | 2020.08.10 |
[CSS]background-image 안나올때 (0) | 2020.07.29 |
[CSS] 배경이미지로 아이콘 한번에 넣기 (0) | 2020.07.23 |
[CSS]배경이미지에만 OPACITY 적용(multiple효과) (0) | 2020.06.30 |