How would you build this tagline?

Design help General
1

I need to build this tagline, but can’t figure out how to do the angle at the end. It’s a must have for the website.

tagline
tagline768×399 14.7 KB

If look in to the project you’ll see I have two variants, a dark one and a white one. I hope I can keep it like that because it’s easier to build pages that way.

Here is my site Read-Only: LINK

2

The CSS corner-shape property with the value bevel is actually exactly what you want: https://codepen.io/mrdanielschwarz/pen/pvgKKMj (added as a custom CSS property in WF).

But it’s currently not supported by every browser: "corner-shape" | Can I use... Support tables for HTML5, CSS3, etc

There are loads of hacky ways to achieve this with pure CSS using clip-paths, pseudo-elements, and/or gradients. All of which aren’t ideal, but will work. You could also use an image.

However, if you’re not comfortable with CSS, your best option may be to just drop the angled corner and try something else.

Hope this helps.