吹き出し記法 - 基素基

吹き出し記法

/shokai/吹き出し記法の配色をLINE風にしてる

吹き出し本体

css selectorでは、{等の記号は\でエスケープする必要がある

左吹き出しの本体

code:style.css

.deco-\{ {

font-size: 1em;

background-color: #efefef;

padding: 0.1em 0.2em 0.1em 0.2em;

border-radius: 0.4em;

margin: auto 0.3em;

display: inline-block;

max-width: calc(100% - 100px);

vertical-align: top;

}

shokai.icon 左吹き出しの角

code:style.css

.deco-\{:before {

position: absolute;

margin: 0;

padding: 0;

transform: translateX(-100%) translateY(calc(1em - 80%));

width: 0;

content: "";

border-width: 0 0 0.6em 0.6em;

border-style: solid;

border-color: #efefef transparent;

}

右吹き出しの本体

code:style.css

.deco-\} {

font-size: 1em;

background-color: #c3f69d;

padding: 0.1em 0.2em 0.1em 0.2em;

border-radius: 0.4em;

margin: auto 0.3em;

display: inline-block;

max-width: calc(100% - 100px);

vertical-align: top;

}

右吹き出しの角 shokai.icon

code:style.css

.deco-\}:after {

position: absolute;

margin: 0;

padding: 0;

transform: translateY(calc(1em - 80%));

width: 0;

content: "";

border-width: 0 0.6em 0.6em 0;

border-style: solid;

border-color: #c3f69d transparent;

}