割と使えるかも？
新しいブログでこの記事の最新版を書き起こしました。気になる人はリンク先にGo！
タイトルの通り、CSSのみで「三角形」を作るチュートリアルです。borderプロパティにこんな使い方があったとは…|
1 |
<div class="sankaku"></div> |
|
1 2 3 4 5 6 |
.sankaku{ width: 0; height: 0; border: 80px solid transparent; border-top: 80px solid #f00; } |
試しに、全てのborderに色を付けてみると…
|
1 2 3 4 5 6 7 8 |
.sankaku{ width: 0; height: 0; border-top: 80px solid #f00; border-right: 80px solid #0f0; border-bottom: 80px solid #00f; border-left: 80px solid #000; } |
|
1 2 3 4 5 6 7 8 |
.sankaku{ width: 0; height: 0; border-top: 80px solid #f00; border-right: 30px solid transparent; border-bottom: 80px solid transparent; border-left: 30px solid transparent; } |
|
1 2 3 4 5 6 7 8 |
.sankaku{ width: 0; height: 0; border-top: 30px solid #f00; border-right: 80px solid transparent; border-bottom: 30px solid transparent; border-left: 80px solid transparent; } |
|
1 2 3 4 5 6 7 |
.sankaku{ width: 0; height: 0; border: 80px solid transparent; border-top: 80px solid #f00; border-radius: 100%; } |
|
1 |
<div class="hukidasi">テキスト</div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.hukidasi{ background: #000; color: #fff; text-align: center; width: 300px; padding: 8px 0; border-radius: 12px; position: relative; } .hukidasi:before{ content: ""; position: absolute; bottom: -23px; right: 30%; border: 12px solid transparent; border-top: 12px solid #000; } |
|
1 |
<div class="hukidasi">テキスト</div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.hukidasi{ width: 300px; margin: 0 auto; padding: 8px 0; border: 1px solid #aaa; border-radius: 12px; text-align: center; position: relative; } .hukidasi:before{ content: ""; border: 12px solid transparent; border-top: 12px solid #fff; position: absolute; right: 30%; bottom: -23px; } .hukidasi:after{ content: ""; border: 12px solid transparent; border-top: 12px solid #aaa; position: absolute; right: 30%; bottom: -24px; } |
Name : Leo
北海道在住の元気な22歳。ゲーセンでバイト中。
右手に酒、左手に煙草、目の前にPCという生活。
割とクズだけどいい人（ただし彼女はいない）。
今欲しいのはリボルトの実機。
Web制作は結構好き。
