웹프로그래밍

Global It Leader!!


CSS


 
 

나비 리본

페이지 정보

작성자 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 1,405회 작성일 22-03-28 20:22

본문

<h1 class="ribbon">
   <strong class="ribbon-content">Everybody loves ribbons</strong>
</h1>
.ribbon {
 font-size: 16px !important;
 /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */

 width: 50%;
    
 position: relative;
 background: #ba89b6;
 color: #fff;
 text-align: center;
 padding: 1em 2em; /* Adjust to suit */
 margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
.ribbon:before, .ribbon:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1em;
 border: 1.5em solid #986794;
 z-index: -1;
}
.ribbon:before {
 left: -2em;
 border-right-width: 1.5em;
 border-left-color: transparent;
}
.ribbon:after {
 right: -2em;
 border-left-width: 1.5em;
 border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #804f7c transparent transparent transparent;
 bottom: -1em;
}
.ribbon .ribbon-content:before {
 left: 0;
 border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
 right: 0;
 border-width: 1em 1em 0 0;
}

댓글목록

등록된 댓글이 없습니다.

전체 80
게시물 검색
CSS 목록
번호 제목 글쓴이 조회 날짜
80 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 85 10-11
79 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 85 10-09
78 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 102 07-26
77 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 106 06-10
76 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 111 05-17
75 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 138 05-16
74 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 111 05-14
73 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 146 05-02
72 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 545 07-31
71 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 790 04-09
70 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1124 09-01
69 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2121 04-24
68 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3272 04-24
열람중 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1406 03-28
66 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2892 03-26
65 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1410 03-26
64 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1404 03-25
63 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1447 03-18
62 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 8680 11-28
61 no_profile 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1878 09-20