クリアメモリ

プログラミングやガジェットレビュー、便利なアプリケーションなど雑多に記録するブログ

【はてなブログ】会話形式(簡易版)のスマホ用CSS

会話形式(簡易版)のスマホ用デザインcssです。

 

会話形式

 

記事にもどる

www.clrmemory.com

 

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;
}

 

新着記事