A CSS Challenge: Skewed Highlight

Metadata

• Author: pepelsbey.dev
• Full Title: A CSS Challenge: Skewed Highlight
• URL: https://pepelsbey.dev/articles/skewed-highlight/

Highlights

Open in the new tab mark { —mark-color:f8db75; —mark-skew: 0.25em; —mark-height: 1em; —mark-overlap: 0.3em; margin-inline: calc(var(—mark-overlap) * -1); padding-inline: var(—mark-overlap); background-color: transparent; background-image: linear-gradient( to bottom right, transparent 50%, var(—mark-color) 50% ), linear-gradient( var(—mark-color), var(—mark-color) ), linear-gradient( to top left, transparent 50%, var(—mark-color) 50% ) ; background-size: var(—mark-skew) var(—mark-height), calc(100% - var(—mark-skew) * 2 + 1px) var(—mark-height), var(—mark-skew) var(—mark-height) ; background-position: left center, center, right center ; background-repeat: no-repeat; color: inherit; } (View Highlight)

mark (View Highlight)review