両端に三角があるタイトルのCSS
こんにちは。今日は「両端に三角があるタイトルのCSS」について書きます^^
デザインはこんな感じです↓
一応2行になっても三角部分が見切れないようにしています。
ではさっそくコードを見ていきましょう〜^^
コード
HTML編
<section class="contSect"> <div class="sectTit"><span>タイトルが入ります</span></div> <div class="sectMain"> <div class="txt"> <p>ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー</p> </div> </div> </section> <!-- ./contSect -->
今回触れるのはタイトルだけですがsectionの形にしています。
タイトルを<span>で囲うのがポイントです!
CSS編
.contSect .sectTit { position: relative; font-weight: bold; text-align: center; overflow: hidden; color: #fff; line-height: 1.3; background-color: #3B7EC1; } .contSect .sectTit:before, .contSect .sectTit:after { position: absolute; width: 0; height: 0; display: block; content: ""; border-style: solid; } .contSect .sectTit:before { bottom: 0; left: 0; border-color: #5bc2d9 transparent transparent transparent; } .contSect .sectTit:after { top: 0; right: 0; border-color: transparent transparent #5bc2d9 transparent; } .contSect .sectTit span { position: relative; z-index: 1; } @media only screen and (min-width: 769px), print { .contSect .sectTit { padding: 5px 20px; font-size: 3rem; } .contSect .sectTit:before { border-width: 100px 100px 0 0; } .contSect .sectTit:after { border-width: 0 0 100px 100px; } }
少し解説します。
1.三角2つは擬似要素で作っており、デザインのサイズより大きめに作って文字数の可変に対応できるように
2.サイズが大きいと領域からはみ出るという問題を解決するために【.sectTit】に【overflow: hidden;】を指定
3.擬似要素の上の階層に文字を表示させるために<span>で囲い【z-index】を指定
わかりやすいように【overflow: hidden;】を消すとこんな感じになります↓
では今日はここまで〜〜
今日が年内最後の出勤日なので、良いお年を!!( ´ ▽ ` )
コメント