CSSだけで作る複雑な形の吹き出し テンプレート



  • hukidasicss



CSSで三角形を作成して、その三角形を利用して、いくつかの吹き出しを作ってみたので紹介します。

  • 上部

    CENTER

    See the Pen ZGBJWw by ginazine (@ginazine) on CodePen.

    LEFT

    See the Pen doORxY by ginazine (@ginazine) on CodePen.

    RIGHT

    See the Pen MwbveZ by ginazine (@ginazine) on CodePen.

    下部

    CENTER

    See the Pen NqbXwB by ginazine (@ginazine) on CodePen.

    LEFT

    See the Pen XbNVzr by ginazine (@ginazine) on CodePen.

    RIGHT

    See the Pen zGoppY by ginazine (@ginazine) on CodePen.

    左右

    LEFT TOP

    See the Pen zGopRx by ginazine (@ginazine) on CodePen.

    LEFT BOTTOM

    See the Pen XbNVEW by ginazine (@ginazine) on CodePen.

    RIGHT TOP

    See the Pen RPoxyZ by ginazine (@ginazine) on CodePen.

    RIGHT BOTTOM

    See the Pen bdBavj by ginazine (@ginazine) on CodePen.

    こういうのも一応できる。

    See the Pen xGRpaV by ginazine (@ginazine) on CodePen.

    基本的に丸くしたい場合はborder-radiusで、平らな角を使いたいときはborder-top,left,right,bottomをtransportしながら指定すれば好きな形ができます。


    コメントしてね!