CSSでギザギザの吹き出しを作る方法

@ハクト 2021-09-11 12:57:42に投稿

文字を強調する時に使われるギザギザの吹き出し。

今回はCSSで正方形の要素を回転させてギザギザの吹き出しを作っていきます。

正方形の枠をつくる

「box」「box-body」クラスと疑似要素の幅・高さを200pxにし、正方形の枠を作ります。

<div class="box">
    <div class="box-body">
        <p>ギザギザの吹き出し...</p>
    </div>
</div>

 

.box, .box:before, .box:after,
.box-body, .box-body:before{
    position: absolute;
    background-color: #94B3AD;
    width: 200px;
    height: 200px;
}

.box-body p {
    padding: 0.2rem;
    font-size: 18px;
    color: white;
}

要素を回転させる

「boxクラス」のbefore、after疑似要素を「transform: rotate」で回転させます。（before疑似要素「赤」、after疑似要素「青」）

.box:before {
    transform: rotate(22deg);
    content: '';
}

.box:after {
    transform: rotate(-22deg);
    content: '';
}

要素を回転させる

「box-body」クラスにフレックスボックスを指定し文字を上下左右中央に配置し「z-index:1;」で最前面に表示する。before疑似要素で45度回転させ「z-index:-1;」で背面に移動し完成

.box-body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1;
}
.box-body:before {
    transform: rotate(45deg);
    content: '';
    z-index: -1;
}

全てのソース

コードを表示 

<div class="box">
    <div class="box-body">
        <p>ギザギザの吹き出し。ギザギザの吹き出し。ギザギザの吹き出し。</p>
    </div>
</div>
.box,
.box:before,
.box:after,
.box-body,
.box-body:before {
    position: absolute;
    background-color: #94B3AD;
    width: 200px;
    height: 200px;
}

.box:before {
    transform: rotate(22deg);
    content: '';
}

.box:after {
    transform: rotate(-22deg);
    content: '';
}

.box-body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1;
}

.box-body:before {
    transform: rotate(45deg);
    content: '';
    z-index: -1;
}

.box-body p {
    padding: 0.2rem;
    font-size: 18px;
    color: white;
}
このWEBパーツを確認する

HTML・CSSのカスタマイズや動作確認ができます

PR

在宅ワークで稼げるスキルを身につける テックアカデミーWeb制作講座
動画編集入門プラン（2ヶ月）用LP
Web制作 プログラミング初心者 駆け出しエンジニアと繋がりたい webデザイン勉強中 ブログ
B!

@ハクト

サービス作り・デザイン好き。70年代生まれのWEBエンジニア。WEBパーツをCSSでカスタマイズしてコピペできるサービスを運営中「Pa-tu」。実装したWEBパーツやツールを利用してWEB情報やライフハックを発信してます。

Twitter