HTML/CSS

【簡単】オリジナルの吹き出しをCSSだけで作る方法

更新日:

このブログでは私自身がプログラミング、Web関係、生活していて経験した悩んだことを同じように悩んでいる人の手助けになるような情報を発信していきます。

基となる作品

はじめに

HTML

<body>
  <div class="balloon">
    <h1>こんにちは</h1>
  </div>
</body>

CSS

body{
  margin:0;
  background-color: pink;
}
.balloon{
   width: 225px;
   height: 200px;
   background-color: white;
   border-radius:100%;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
 }

display: flex;justify-content: center;align-items: center;で文字を上下左右に中央寄せ。

balloonクラス(親要素)にposition: relative;とします。

それでは解説していきます

CSS

.balloon::before{
 content: '';
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 50px 20px;
 border-color: white transparent transparent transparent;
 position: absolute;
 right: 5px;
 bottom: -70px;
 }

balloonクラスbeforeでは吹き出しの突出している三角部分をborderで作っていきます。

border-styleはsolid、border-widthを50px 20pxにして縦長の長方形にします。

border-colorをwhite transparent transparent transparentとして逆三角を作ります。

position: absolute;でballoonクラスに重ね、右に5px、下に70pxに移動させます。

最後に

.balloon::before{
 position: absolute;
 right: 5px;
 bottom: -70px;
 content: '';
 z-index: -1;
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 50px 20px;
 border-color: white transparent transparent transparent;
 transform: skew(30deg , 0);
 }

X軸の傾斜角度transform: skew(30deg , 0);とします、これで吹き出しの完成です。

オリジナルの吹き出しを作る時はborder-width(大きさ)、position: absolute;(位置)、transform: skew;(傾斜角度)を意識して作ります。

オススメしている本

他の投稿

-HTML/CSS

Copyright© yamab-log , 2021 All Rights Reserved Powered by STINGER.