[CSS] DIV 우측 하단에 삼각형 넣기
인
인정사정 (122.♡.43.4)
2025년 5월 16일 AM 12:44 · 수정됨(07. 03. 11:34)
조회 776 공감 0
DIV 우하단 구석에 삼각형을 CSS로 넣는 방법이 있을까 고민하다가,
요런 잔꾀가 생각이 났네요.
<!DOCTYPEhtml>
<htmllang="ko">
<head>
<metacharset="UTF-8"/>
<title>오른쪽 하단 삼각형</title>
<style>
.box {
position: relative;
background-color: #141F7A;
color: white;
height: 200px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 110px;
font-weight: bold;
}
.triangle {
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 0;
border-left: 80pxsolidtransparent;
border-bottom: 80pxsolid#D62857; /* 삼각형 색상 */
}
</style>
</head>
<body>
<divclass="box">
<div>이제부터 진짜 대한민국</div>
<divclass="triangle"></div>
</div>
</body>
</html>
댓글 (2)
-
Gggang9
25.05.16 · 106.♡.33.16
-
남남자는갈대
25.07.03 · 211.♡.64.151
이제부터 진짜 대한민국
댓글을 작성하려면 이 필요합니다.
처음에 읭?????? 하다가 아래 링크 보고 이해 했습니다. ㅎㅎ
https://codepen.io/chriscoyier/pen/DELgOJ