DEV Community

loading...
Cover image for Pure CSS Blockquotes

Pure CSS Blockquotes

killshot13 profile image Michael R. ・1 min read

Overview

Developed using only CSS and HTML, these blockquotes examples offer a nice way to show off your site's accent color(s) without much extra work.

By using the natural breakpoints in the border and changing the width of the "negative space", I was able to create two nice angled versions.



But How?

This is made possible by giving border-bottom and border-top the exact same color as background-color, creating a simulated angle that would otherwise be hard to achieve on such a narrow width.

I'm sure I cannot be the only one to have thought of this idea, but I have not yet come across it so I am quite proud to take credit for this version of the concept at least. πŸ™ƒπŸ™ƒπŸ™ƒ

Usage

Of course, anyone is free to use it or find ways to improve it. Just put a link back in the comments, please!

Don't forget to πŸ’– this article and/or leave a πŸ’­. Even better, you can click my name below to πŸŽ†subscribeπŸŽ‡!

Until next time...

-- killshot13


killshot13 image

Discussion (1)

pic
Editor guide
Collapse
mlnzyx profile image