<ol class="comments">
  <li class="comment">
    <img src="https://api.adorable.io/avatars/200/a@adorable.io.png" alt="" />
    <div class="comment-text">
      <div class="author">Susan Sanddollar</div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa sunt provident veniam molestias officia voluptatum, at eos fuga alias reprehenderit.</p>
    </div>
  </li>
  <li class="comment">
    <img src="https://api.adorable.io/avatars/200/b@adorable.io.png" alt="" />
    <div class="comment-text">
      <div class="author">Jack Jacklehammer</div>
      <p>Ipsam, omnis nisi minus voluptatem temporibus at sunt magni porro cum modi, fugiat libero, recusandae facere eligendi facilis natus doloribus?</p>
    </div>
  </li>
  <li class="comment">
    <img src="https://api.adorable.io/avatars/200/c@adorable.io.png" alt="" />
    <div class="comment-text">
      <div class="author">Randy Rickroller</div>
      <p>Laudantium illum officiis accusantium, beatae quod enim hic, doloremque dolorum, incidunt quaerat ipsam expedita tempora. Nemo quibusdam dicta neque nostrum.</p>
    </div>
  </li>
  <li class="comment">
    <img src="https://api.adorable.io/avatars/200/d@adorable.io.png" alt="" />
    <div class="comment-text">
      <div class="author">Tim Toodledoo</div>
      <p>Velit deleniti ratione sapiente quis autem, sint cupiditate. At odit quia sunt eaque, minima officia sit assumenda ex voluptates reiciendis!</p>
    </div>
  </li>
</ol>
@import url('https://fonts.googleapis.com/css?family=Sahitya:400,700');
body {
  font-family: 'Sahitya', serif;
}

.comments {
  list-style: none;
  margin: 0;
  padding: 0;
}
.comment {
  border-bottom: 1px solid #ccc;
  padding: 2rem;
  display: flex;
  align-items: flex-start;
  > img {
    width: 100px;
    margin-right: 2rem;
    clip-path: polygon(0% 5%, 100% 0%, 100% 85%, 65% 80%, 75% 100%, 40% 80%, 0% 75%);
    transition: clip-path 0.2s;
    &:hover {
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%, 0 100%, 0 100%, 0 100%);
    }
  }
  .author {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #777;
  }
  p {
    margin: 0 0 1rem 0;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.