A Pen created on CodePen.io. Original URL: https://codepen.io/killshot13/pen/MWJeOwE.
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 border
and changing the width
of the "negative space", I was able to create two nice angled versions.
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.
Of course, anyone is free to use it or find ways to improve it. Just put a link back in the comments please!