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. πŸ™ƒπŸ™ƒπŸ™ƒ


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

This post is also available on DEV.