【HTML/CSS】「＼　／」的なスラッシュ吹き出し

2024年2月15日2024年5月30日

Kizineko（COPPY管理人）

URLをコピーしました！

目次（クリックでジャンプ）

【HTML/CSS】「＼　／」的なスラッシュ吹き出し

タイトルそのままです。スラッシュで作るふきだしです。
＼キャンペーン実施中／というような吹き出しのデザインをCSSで欲しかったので作りました。

キャンペーンなどの見出しに使える、シンプルで汎用性◎
2行以上にも対応&サイズ可変型

See the Pen 吹き出し by ananchan (@kizikizi) on CodePen.

HTML

<h2 class="service__ttl">
  <span class="service__ttl__sub">今だけ特別な</span>
  <span class="service__ttl__main">キャンペーン実施中</span>
</h2>

sub見出しは必要なければ適宜削除して使ってください。

CSS（SCSS）

下記コードはSCSSで記述しています。CSSでコードを使いたい方は、手動またはツール等でCSSに変換して使ってください。
・オンラインSCSS→CSSコンバーター
・SCSSをCSSにリアルタイムで変えるツール

.service__ttl {
  position: relative;
  text-align: center;
  display: block;
  width: fit-content;
  line-height: 1.2;
  margin: 4rem auto 3rem;
  padding: 0 2rem;
  &__main {
    font-size: 1.2rem;
    font-weight: bold;
  }
  &__sub {
    display: block;
    font-size: 0.9rem;
    font-weight: lighter;
  }
  &::before,&::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 1px;
    height: 2rem;
    background: rgba(0,0,0,0.4);
  }
  &::before {
    transform: rotate(-30deg);
    left: 0;
  }
  &::after {
    transform: rotate(30deg);
    right: 0;
  }
}