A nice touch in a longer article is a pull quote: a short but important or evocative excerpt from the article that’s set off from the regular text. A well-selected and well-designed pull quote can draw in a site visitor who might not otherwise read the article.
There are many ways to style attractive pull quotes, but here’s one of my favorites—making the pull quote look like a speech bubble:
Here’s what’s going on, CSSwise:
.pullquote
<div>
tag.
background-color
: …
<div>
tag.
position: relative
::after
pseudo-element.
.pullquote::after
content: ''
position: absolute
top: 100%
left: 2rem
border-width: 36px 30px 0 0
border-color: navy transparent
transform: skewX(-10deg)
If the triangle pseudo-element has you scratching your head, perhaps you’d like to check out my animated tutorial Creating Triangles with CSS, which explains how it’s possible to generate a triangle shape from nothing but good ol’ CSS code.