CSS でリボン風デザインをつくる
published:
コンテンツの見出しの装飾などに使われるリボン風デザインをCSS で表現する。
.example {
position: relative;
margin: 0 auto;
width: 200px;
height: 50px;
background-color: #96c;
}
.example:before,
.example:after {
position: absolute;
top: 0;
display: inline-block;
width: 0;
height: 0;
border: 25px solid #96c;
content: '';
}
.example:before {
left: -15px;
border-right-width: 0;
border-left-width: 15px;
border-left-color: transparent;
}
.example:after {
right: -15px;
border-right-width: 15px;
border-right-color: transparent;
border-left-width: 0;
}
擬似要素と呼ばれる :before と :after を使って両端にリボン風の見た目を表現する。
幅と高さの値を 0 に指定して、border プロパティで形をつくる。