Kudos
Collect
Twiiter
Facebook
Share
개발의 'ㄱ'자라도 아는 날을 기대하며...

[css] div 박스 아래에 작은 삼각형 그리기

Last updated over 3 years ago
0 0 0 0

div 박스 아래에 삼각형을 표시하고 싶을 때, 사용할 수 있는 css 코드입니다. 세모를 표시하기 위한 여러 많은 방법이 많겠지만, 복잡하지 않게 적당히 쓸 수 있는 방법인거 같아서 찾아본 김에 정리해둡니다. 누군가에게는 도움이 되는 내용이었으면 좋겠네요.

박스 아래 삼각형 표시 예
박스 아래 삼각형 표시 예

CSS 코드

.content-box {
    position: relative;
    border: 5px solid #4993a0;
}

.content-box:after {
    content:'';
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 15px solid #4993a0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
}

HTML 코드

<div class="content-box">
    나는 읽기 쉬운 마음이야 당신도 스윽 훑고 가셔요 달랠 길 없는 외로운 마음 있지
    머물다 가셔요 음 내게 긴 여운을 남겨줘요 사랑을 사랑을 해줘요
    할 수 있다면 그럴 수만 있다면 새하얀 빛으로 그댈 비춰 줄게요
</div>

참조

안녕하세요?^^ 개발자라는 소리를 듣고 싶어 늦은 나이에 개발의 세계에 몸담게 된 Brad 라고 합니다. 아직 개발의 'ㄱ' 자도 모르지만, 개발을 배우면서 알게되는 것들을 림프에 정리해보려고 합니다. 저의 부족한 글이 누군가에게 조금이나마 도움이 되길 바랍니다.

Essedrop - Make your file online instantly
 

Responses

Leave a response to @brad

Please sign in to comment.
Markdown is also available in comment.