<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.