プロフィールのボックス斜めの写真名前読み方付き HTML/CSS サンプル

CODE

.profile {
  background:#d70035;
  width: 300px;
}

.profile__img {
  position: relative;
}

.profile__img img {
  width: 100%;
}

.profile__img:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  border-style: solid;
  border-width: 35px 0 0 300px;
  border-color: transparent transparent transparent #d70035;
}

.profile__name,.profile__yomi,.profile__desc {
  color: #fff;
}

.profile__name {
  padding:.5rem 1.6rem .2rem;
  font-weight:bold;
  font-size:1.4rem;
  letter-spacing:.1rem;
}

.profile__yomi {
  padding:0 1.6rem 0;
  font-size:.8rem;
  letter-spacing:.1rem;
  opacity:.7;
}

.profile__desc {
  padding:1.6rem;
  line-height:1.6rem;
}

<div class="profile">
  <div class="profile__img">
    <img src="画像のURL">
  </div>
  <div class="profile__name">名字 名前</div>
  <div class="profile__yomi">Namae Myouji</div>
  <div class="profile__desc">ここに簡単な自己紹介が入ります。ここに簡単な自己紹介が入ります。ここに簡単な自己紹介が入ります。ここに簡単な自己紹介が入ります。</div>
</div>