両端に三角があるタイトルの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;
  }
}

少し解説します。

わかりやすいように【overflow: hidden;】を消すとこんな感じになります↓

では今日はここまで〜〜

今日が年内最後の出勤日なので、良いお年を！！( ´ ▽ ` )