【はてなブログ】会話形式(簡易版)のスマホ用CSS
会話形式(簡易版)のスマホ用デザインcssです。
会話形式
記事にもどる
CSS
.p-right, .p-left { border: 1px solid #555; border-radius: 10px; width: calc(100% - 95px); padding: 12px 10px; margin-top: 20px; margin-bottom: 30px; position: relative; } .p-left { margin-left: auto; } .p-right:before, .p-left:before { content: ''; position: absolute; top: 10px; width: 15px; height: 15px; border-bottom: 1px solid #555; border-right: 1px solid #555; background: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, white 0); } .p-right:before { right: -9px; transform: rotate(-45deg) skew(15deg, 15deg); } .p-left:before { left: -9px; transform: rotate(135deg) skew(15deg, 15deg); } .p-right:after, .p-left:after { content: ''; position: absolute; top: -7px; width: 55px; height: 55px; border: 1px solid #555; border-radius: 40px; background-position: center; background-size: cover; background-repeat: no-repeat; } .p-right:after { right: -75px; } .p-left:after { left: -75px; }