HTML/CSS로 간단하고 가벼운 리본 만들기 (JPG/PNG 이미지 불필요)

JPG나 PNG 이미지 없이 텍스트가 들어간 리본 배경을 만들 수 있는 간단하고 가벼운 HTML/CSS 코드입니다.

데모: 내 웹사이트를 위한 CSS 리본

HTML

아래 코드를 복사해 HTML 문서에 붙여 넣으세요.

<div class="ribbon">
    <span class="ribbon-text">My Ribbon</span>
</div>

CSS

아래 코드를 복사해 CSS 파일에 붙여 넣으세요.

.ribbon {
    position: relative;
    background: blue;
    text-align: center;
    z-index: 1;
    width: 240px;
    height: 52px;
    margin: 0 auto;
}
.ribbon-text {
    position: relative;
    display: block;
    font-size: 2em;
    color: white;
}
.ribbon:before {
    content: '';
    border: 26px solid blue;
    border-left-color: transparent;
    border-left-width: 14px;
    position: absolute;
    top: 0;
    left: -20px;
}
.ribbon:after {
    content: '';
    border: 26px solid blue;
    border-right-color: transparent;
    border-right-width: 21px;
    position: absolute;
    top: 0;
    right: -27px;
}

리본의 색상과 크기는 자유롭게 바꿀 수 있습니다. 색상을 바꾸려면 background와 두 border 선언에 있는 blue를 모두 교체하세요. 높이를 바꾼다면 :before와 :after의 26px 테두리 두께를 새 높이의 절반으로 설정하세요. 즐겁게 만들어 보세요!