generated at
吹き出し記法
/shokai/吹き出し記法の配色をLINE風にしてる
吹き出し本体
css selectorでは、 { 等の記号は \ でエスケープする必要がある
左吹き出しの本体
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 左吹き出しの角
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; }
右吹き出しの本体
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
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; }