CSSで作るリボン風の見出し
~CSSでリボンを作るまでの大まかな流れ~
まず、リボン風にしたい部分の要素をhtmlに設定。
そこにスタイルを適用させ、borderプロパティでリボンの影に見せる部分の三角形を作成し
positionプロパティで位置の調整をしていく、という流れ。
まずは、htmlから
【 html 】
1
<div class="sample1">
2
サンプルテキスト サンプルテキスト
3
</div>
次に、CSSのコーディングをしていく
【 CSS 】
1
.sample1{
2
position: relative;
3
color: #ffffff ;
4
background: #1A1A1A;
5
font-size: 15px ;
6
line-height: 1;
7
margin: 15px 65px 20px -12px;
8
padding: 7px 20px 5px 20px;
9
box-shadow:1px 1px 3px 0px #666666 ;
10
}
11
.sample1:before {
12
content: "";
13
position: absolute;
14
top: 100%;
15
height: 0;
16
width: 0;
17
border: 5px solid transparent;
18
border-top: 5px solid #484641;
19
}
20
.sample1:after{
21
left: 0;
22
border-right: 5px solid #484641;
23
}
24
.sample1:before{
25
visibility:hidden;
26
}
27