【コピペでOK】吹き出しデザインジェネレーター

HTML

こちらのHTMLコードをコピーして貼り付けます。

<div class='arrow_box'>テキスト入ります。テキスト入ります。</div>

CSS

こちらのCSSコードをコピーして貼り付けます。

.arrow_box{
    position:relative;
    width:230px;
    height:130px;
    background:#6a5acd;
    padding:10px;
    text-align:left;
    color:#FFFFFF;
    font-size:15px;
}
.arrow_box:after{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(106, 90, 205, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    margin-left: -10px;
    border-top-color:#6a5acd;
    top:100%;
    left:50%;
}

吹き出しデザインジェネレーター[CSS3対応]～完成後の吹き出しデザインを見ながら簡単調整♪HTML、CSSを出力します。

こんな吹き出しが作れます。クリックすると同じ吹き出しが簡単に作成できます♪

クラス名

テキスト内容

ボックス

三角の位置

線

角丸

文字

文字影

HTML

CSS

SNSでみんなにシェア

こんな吹き出しが作れます。クリックすると同じ吹き出しが簡単に作成できます♪

クラス名

テキスト内容

ボックス

三角の位置

線

角丸

文字

文字影

HTML

CSS

SNSでみんなにシェア