Pure CSS Blockquotes

killshot13

Michael R.

Posted on March 29, 2021

Pure CSS Blockquotes

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
Michael R.

Posted on March 29, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Tidycoder animation text
codepen Tidycoder animation text

June 26, 2024

Social media icons
codepen Social media icons

June 19, 2024

Responsive Comparison Table
codepen Responsive Comparison Table

June 12, 2024

Carrusel de Revistas RRCSH
codepen Carrusel de Revistas RRCSH

May 8, 2024