Pure CSS Blockquotes
“It’s all about the angles!”
Overview:
Developed using only CSS and HTML, these blockquotes offer an excellent 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 same color as background-color, By invisibly overlapping these two, we can quite handily achieve this creating a simulated angle that would otherwise be hard to accomplish 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 elsewhere, so I am pretty proud to at least be able to take credit for this version of the concept.
Usage
Of course, anyone is free to use the design or find a way to improve upon it. Just put a link back in the comments, please! The original code is available on CodePen, and I have open-sourced it under the MIT License so anyone can modify and reuse it as they please. Happy Blockquoting!
Thank you for reading my article; I genuinely hope you enjoyed it. Please don't forget to 👏 and share this article or post a 📣 down below. Until next time!
— killshot13
If you found this article useful or interesting, please 👏 and share it!
Follow me (M Rehnert) on Medium and check out my most popular articles below!
