ドットパターン入りの吹き出しを作る方法

@ハクト 2023-07-13 11:56:13に投稿

今回は背景にドットパターンを入れ、要素下部に吹き出し口を付けたボックスデザインの実装方法について解説します。

ドットパターンは「radial-gradient」吹き出しは「before」「after」疑似要素を使用し作っています。

「linear-gradient」で背景の色を設定しているので、好きなカラーに変えて活用してください〜。

背景にドットパターンを入れる

「background」に2つの「gradient」関数を指定。「radial-gradient」でドットパターンを作り、「linear-gradient」でピンクの背景を背面に配置。「border-bottom」で下線を引きます

<div class="box">
    <p>パターンを入れた吹き出しデザイン...</p>
</div>

 .box {
    position: relative;
    padding: 1rem 1rem 1.2rem;
    border-bottom: 2px solid #333;
    background:
        radial-gradient(#f2eded 30%, 
                        transparent 30%),
        linear-gradient(#F3C1C2 0 100%);
    background-repeat: repeat, no-repeat;
    background-size: 10px 10px, 100% 100%;

}
.box p {color: #333; line-height: 1.5;}

吹出口をつくる

before疑似要素の「left: 50%;」で中央に配置。幅、高さを0にし「border-top」のみ実線で黒塗りすると下向きの三角形が表示されます。

.box:before {
    position: absolute;
    left: 50%;
    height: 0;
    width: 0;
    content: "";
}

.box:before {
    top: 100%;
    border: 9px solid;
    border-color: transparent;
    border-top-color: #333;
    margin-left: -9px;
}

枠線をつくる

after疑似要素の「top: 99%;」で少し上に配置。「border: 8px solid;」で1px引いた三角形を作ります。背景をピンクにしてbefore疑似要素の三角形の上に重ねて枠線を入れた吹出口が完成。

.box:before,.box:after {
    position: absolute;
    ...
}

.box:after {
    top: 99%;
    border: 8px solid;
    border-color: transparent;
    border-top-color: #F3C1C2;
    margin-left: -8px;
}

全てのソース

コードを表示 

<div class="box">
    <p>パターンを入れた吹き出しデザイン。パターンを入れた吹き出しデザイン。パターンを入れた吹き出しデザイン。パターンを入れた吹き出しデザイン。パターンを入れた吹き出しデザイン。</p>
</div>
.box {
    position: relative;
    padding: 1rem 1rem 1.2rem;
    border-bottom: 2px solid #333;
    background:
        radial-gradient(#f2eded 30%, transparent 30%),
        linear-gradient(#F3C1C2 0 100%);
    background-repeat: repeat, no-repeat;
    background-size: 10px 10px, 100% 100%;
}

.box:before,
.box:after {
    position: absolute;
    left: 50%;
    content: "";
    height: 0;
    width: 0;
}

.box:before {
    top: 100%;
    border: 9px solid;
    border-color: transparent;
    border-top-color: #333;
    margin-left: -9px;
}

.box:after {
    top: 99%;
    border: 8px solid;
    border-color: transparent;
    border-top-color: #F3C1C2;
    margin-left: -8px;
}

.box p {
    color: #333;
    line-height: 1.5;
}
このWEBパーツを確認する

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

PR

フリーランスエンジニアに安心保証
在宅ワークで稼げるスキルを身につける テックアカデミーWeb制作講座
css 吹き出し 背景パターン
B!

@ハクト

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

Twitter