DEV Community

Cover image for Pure CSS Blockquotes
Michael R.
Michael R.

Posted on • Edited on

3

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



Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (1)

Collapse
 
rizkimcitra profile image
R. Maulana Citra

cool

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay