Splitting Text Color with CSS when compared to the background

up vote
11
down vote

favorite

I'm trying to achieve the following but really struggling. I simply am trying to achieve a diagonal background which goes through the text and changes the colour my choice.

Split Text Image Example

I'ved tried using css mixed-blend-mode however it just contrasts my colors rather than having the option to split into two different colors.

* 
 margin: 0;
 padding: 0


header 
 overflow: hidden;
 height: 100vh;
 background-color: #FFF;
 background-image: -webkit-linear-gradient(30deg, #FFF 50%, #adf175 50%);
 min-height: 500px;


h2 
 color: white;
 font: 900 35vmin/35vh cookie, cursive;
 text-align: center;
 position: fixed;
 top: 0px;
 left: 20px;
 mix-blend-mode: difference;


h2:after 
 color: white;
 mix-blend-mode: difference;

<header>
 <h2>On A Mission</h2>
</header>

edited Nov 9 at 20:19

Temani Afif

59.2k93472

asked Nov 9 at 9:29

Nic

564

New contributor

Agreed with answerers, you definitively should take a look at SVG!
– Bigood
Nov 9 at 9:54

add a comment |

up vote
11
down vote

favorite

I'm trying to achieve the following but really struggling. I simply am trying to achieve a diagonal background which goes through the text and changes the colour my choice.

Split Text Image Example

I'ved tried using css mixed-blend-mode however it just contrasts my colors rather than having the option to split into two different colors.

* 
 margin: 0;
 padding: 0


header 
 overflow: hidden;
 height: 100vh;
 background-color: #FFF;
 background-image: -webkit-linear-gradient(30deg, #FFF 50%, #adf175 50%);
 min-height: 500px;


h2 
 color: white;
 font: 900 35vmin/35vh cookie, cursive;
 text-align: center;
 position: fixed;
 top: 0px;
 left: 20px;
 mix-blend-mode: difference;


h2:after 
 color: white;
 mix-blend-mode: difference;

<header>
 <h2>On A Mission</h2>
</header>

edited Nov 9 at 20:19

Temani Afif

59.2k93472

asked Nov 9 at 9:29

Nic

564

New contributor

Agreed with answerers, you definitively should take a look at SVG!
– Bigood
Nov 9 at 9:54

add a comment |

up vote
11
down vote

favorite

I'm trying to achieve the following but really struggling. I simply am trying to achieve a diagonal background which goes through the text and changes the colour my choice.

Split Text Image Example

I'ved tried using css mixed-blend-mode however it just contrasts my colors rather than having the option to split into two different colors.

* 
 margin: 0;
 padding: 0


header 
 overflow: hidden;
 height: 100vh;
 background-color: #FFF;
 background-image: -webkit-linear-gradient(30deg, #FFF 50%, #adf175 50%);
 min-height: 500px;


h2 
 color: white;
 font: 900 35vmin/35vh cookie, cursive;
 text-align: center;
 position: fixed;
 top: 0px;
 left: 20px;
 mix-blend-mode: difference;


h2:after 
 color: white;
 mix-blend-mode: difference;

<header>
 <h2>On A Mission</h2>
</header>

edited Nov 9 at 20:19

Temani Afif

59.2k93472

asked Nov 9 at 9:29

Nic

564

New contributor

I'm trying to achieve the following but really struggling. I simply am trying to achieve a diagonal background which goes through the text and changes the colour my choice.

Split Text Image Example

I'ved tried using css mixed-blend-mode however it just contrasts my colors rather than having the option to split into two different colors.

* 
 margin: 0;
 padding: 0


header 
 overflow: hidden;
 height: 100vh;
 background-color: #FFF;
 background-image: -webkit-linear-gradient(30deg, #FFF 50%, #adf175 50%);
 min-height: 500px;


h2 
 color: white;
 font: 900 35vmin/35vh cookie, cursive;
 text-align: center;
 position: fixed;
 top: 0px;
 left: 20px;
 mix-blend-mode: difference;


h2:after 
 color: white;
 mix-blend-mode: difference;

<header>
 <h2>On A Mission</h2>
</header>

* 
 margin: 0;
 padding: 0


header 
 overflow: hidden;
 height: 100vh;
 background-color: #FFF;
 background-image: -webkit-linear-gradient(30deg, #FFF 50%, #adf175 50%);
 min-height: 500px;


h2 
 color: white;
 font: 900 35vmin/35vh cookie, cursive;
 text-align: center;
 position: fixed;
 top: 0px;
 left: 20px;
 mix-blend-mode: difference;


h2:after 
 color: white;
 mix-blend-mode: difference;

<header>
 <h2>On A Mission</h2>
</header>

* 
 margin: 0;
 padding: 0


header 
 overflow: hidden;
 height: 100vh;
 background-color: #FFF;
 background-image: -webkit-linear-gradient(30deg, #FFF 50%, #adf175 50%);
 min-height: 500px;


h2 
 color: white;
 font: 900 35vmin/35vh cookie, cursive;
 text-align: center;
 position: fixed;
 top: 0px;
 left: 20px;
 mix-blend-mode: difference;


h2:after 
 color: white;
 mix-blend-mode: difference;

<header>
 <h2>On A Mission</h2>
</header>

javascript html css css3

edited Nov 9 at 20:19

Temani Afif

59.2k93472

asked Nov 9 at 9:29

Nic

564

New contributor

edited Nov 9 at 20:19

Temani Afif

59.2k93472

asked Nov 9 at 9:29

Nic

564

New contributor

edited Nov 9 at 20:19

Temani Afif

59.2k93472

edited Nov 9 at 20:19

Temani Afif

59.2k93472

edited Nov 9 at 20:19

Temani Afif

59.2k93472

asked Nov 9 at 9:29

Nic

564

New contributor

asked Nov 9 at 9:29

Nic

564

asked Nov 9 at 9:29

Nic

564

New contributor

Nic is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

Agreed with answerers, you definitively should take a look at SVG!
– Bigood
Nov 9 at 9:54

add a comment |

Agreed with answerers, you definitively should take a look at SVG!
– Bigood
Nov 9 at 9:54

Agreed with answerers, you definitively should take a look at SVG!
– Bigood
Nov 9 at 9:54

add a comment |

4 Answers
4

active

oldest

votes

up vote
5
down vote

Clipping is an excellent solution.

But if you have the freedom of applying the gradient on the text of h2 , then it can be done with a little switcheroo trick.

h2 
 background: linear-gradient(30deg, #adf175 50%, #FFF 50%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;

Basically, one applies the linear-gradient background on the text element , h2 in this case, and use background-clip property to clip the background to extend to the text only . Finally use the text-fill-color to set the color of the h2 to transparent

I had just reversed the gradient colors from the question above for the h2 and the div .

More info can be seen here

https://css-tricks.com/almanac/properties/b/background-clip/

Difference between "-webkit-text-fill-color" and "color"?

body 
 font-size: 16px;
 font-family: Verdana, sans-serif;


.wrap 
 width: 50%;
 margin: 0 auto;
 border: 1px solid #ccc;
 text-align: center;
 background: linear-gradient(30deg, #FFF 50%, #adf175 50%);


h2 
 background: linear-gradient(30deg, #adf175 50%, #FFF 50%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;

<div class="wrap">
 <h2>Hello World</h2>
</div>

Caution : background-clip:text is an experimental tech

edited Nov 9 at 20:19

Temani Afif

59.2k93472

answered Nov 9 at 10:04

semuzaboi

1,65511127

add a comment |

up vote
4
down vote

* 
 margin: 0;
 padding: 0


header 
 position: relative;
 height: 100vh;
 min-height: 500px;
 font: 900 35vmin/35vh cookie, cursive;
 text-align: center;
 color: #adf175;


header > div 
 min-height: 100%;


.foreground 
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background: #adf175;
 color: white;
 clip-path: polygon(30% 0, 100% 100%, 100% 0);


h2 
 position: fixed;

<header>
 <div>
 <h2>On A Mission</h2>
 </div>
 <div class="foreground">
 <h2>On A Mission</h2>
 </div>
</header>

Blend modes are fixed formulas which you can use creatively. They mix two overlapping images (visual appearances) together. So the parameters are the two overlaying pixels nothing else.

But you can create such an effect with a little help of #clippath, #svg, #javascript or the like.
See this website for example: https://mathieulevesque.com/en
I guess they doubled the text and gave it two different appearances.

I just created a quick prototype. you can play with. Hope it helps.

If you want to go with clean code, you can create the second div with the help of javascript.

This tool could help you playing around with shapes.

edited 2 days ago

answered Nov 9 at 9:45

Matthi

379211

add a comment |

up vote
1
down vote

So this can be done using background-clip: text - although this is not universally supported, it does work in the latest Chrome, Firefox and Edge:

.container 
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh;


.rotate 
 border: 1px solid #ddd;
 text-align: center;
 background: linear-gradient(75deg, #adf175 50%, transparent 50%);
 transform: rotate(-90deg);


.text 
 font-family: arial, sans-serif;
 font-size: 1.5em;
 font-weight: bold;
 padding: 5px;
 margin: 0;
 text-transform: uppercase;
 background: linear-gradient(75deg, #fff 50%, #adf175 50%);
 color: transparent;
 -webkit-background-clip: text;
 -moz-background-clip: text;
 background-clip: text;


.fit-text 
 font-size: 2.25rem;

<div class="container">

 <div class="rotate">
 <div class="text">we are on a
 <div class="fit-text">mission</div>
 </div>
 </div>

 <div class="rotate">
 <div class="text">we are on a<br/>mission</div>
 </div>
</div>

This solution includes rotating the result and expanding the last word to fit (the way your example image looks) - I have included a non-expanded version as well.

edited Nov 9 at 13:55

answered Nov 9 at 13:23

Raad

3,00111534

add a comment |

up vote
1
down vote

Here is another idea using more supported features than clip-path and background-clip:text. The idea is to rely on skew transformation and some hidden overflow.

I used CSS variables for better flexibility but they can easily be omitted in case we need old browser support.

:root 
 --c1:#adf175;
 --c2:#f3f3f3;


.box 
 font-size: 20px;
 font-family: Verdana, sans-serif;
 color:var(--c1);
 background:var(--c2);
 padding:20px;
 position:relative;
 display:inline-block;
 overflow:hidden;

.box:before 
 content:var(--text);

.box span 
 position:absolute;
 top:0;
 left:-20px;
 right:var(--p,50%);
 bottom:0;
 padding:inherit;
 background:var(--c1);
 color:var(--c2);
 white-space:nowrap;
 overflow:hidden;
 transform:skew(15deg);

.box span:before
 content:var(--text);
 display:inline-block;
 margin-left:20px; /*Same value as left on the span*/
 transform:skew(-15deg); /*same value as the skew on the span*/

<div class="box" style="--text:'Lorem Ipsum'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:20%">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:80%">
<span></span>
</div>

We can introduce another variable to control the skewing:

:root 
 --c1:#adf175;
 --c2:#f3f3f3;

.box 
 font-size: 20px;
 font-family: Verdana, sans-serif;
 color:var(--c1);
 background-color:var(--c2);
 padding:20px;
 position:relative;
 display:inline-block;
 overflow:hidden;

.box:before 
 content:var(--text);

.box span 
 position:absolute;
 top:0;
 left:-50px;
 right:var(--p,50%);
 bottom:0;
 padding:inherit;
 color:var(--c2);
 background-color:var(--c1);
 white-space:nowrap;
 overflow:hidden;
 transform:skew(var(--s,15deg));

.box span:before
 content:var(--text);
 display:inline-block;
 margin-left:50px; /*Same value as left on the span*/
 transform:skew(calc(-1 * var(--s,15deg)));

<div class="box" style="--text:'Lorem Ipsum'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:20%;--s:-30deg">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:70%;--s:45deg">
<span></span>
</div>

We can also consider multiline text:

:root 
 --c1:#adf175;
 --c2:#f3f3f3;

.box 
 font-size: 20px;
 font-family: Verdana, sans-serif;
 color:var(--c1);
 background-color:var(--c2);
 padding:20px;
 position:relative;
 display:inline-block;
 overflow:hidden;
 --w:140px;
 width:var(--w); /*we fix the width to have multiple lines*/

.box:before 
 content:var(--text);

.box span 
 position:absolute;
 top:0;
 left:-50px;
 right:var(--p,50%);
 bottom:0;
 padding:inherit;
 color:var(--c2);
 background-color:var(--c1);
 overflow:hidden;
 transform:skew(var(--s,15deg));

.box span:before
 content:var(--text);
 width:var(--w); /* we use the same width as the box*/
 display:inline-block;
 margin-left:50px; /*Same value as left on the span*/
 transform:skew(calc(-1 * var(--s,15deg)));

<div class="box" style="--text:'Lorem Ipsum dolert text'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum dolert text';--p:20%;--s:-30deg">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum dolert text';--p:40%;--s:45deg">
<span></span>
</div>

edited Nov 10 at 19:07

answered Nov 9 at 20:11

Temani Afif

59.2k93472

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

Nic is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53223031%2fsplitting-text-color-with-css-when-compared-to-the-background%23new-answer', 'question_page');

);

Post as a guest

Name

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

up vote
5
down vote

Clipping is an excellent solution.

But if you have the freedom of applying the gradient on the text of h2 , then it can be done with a little switcheroo trick.

h2 
 background: linear-gradient(30deg, #adf175 50%, #FFF 50%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;

I had just reversed the gradient colors from the question above for the h2 and the div .

More info can be seen here

https://css-tricks.com/almanac/properties/b/background-clip/

Difference between "-webkit-text-fill-color" and "color"?

body 
 font-size: 16px;
 font-family: Verdana, sans-serif;


.wrap 
 width: 50%;
 margin: 0 auto;
 border: 1px solid #ccc;
 text-align: center;
 background: linear-gradient(30deg, #FFF 50%, #adf175 50%);


h2 
 background: linear-gradient(30deg, #adf175 50%, #FFF 50%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;

<div class="wrap">
 <h2>Hello World</h2>
</div>

Caution : background-clip:text is an experimental tech

edited Nov 9 at 20:19

Temani Afif

59.2k93472

answered Nov 9 at 10:04

semuzaboi

1,65511127

add a comment |

up vote
5
down vote

Clipping is an excellent solution.

But if you have the freedom of applying the gradient on the text of h2 , then it can be done with a little switcheroo trick.

h2 
 background: linear-gradient(30deg, #adf175 50%, #FFF 50%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;

I had just reversed the gradient colors from the question above for the h2 and the div .

More info can be seen here

https://css-tricks.com/almanac/properties/b/background-clip/

Difference between "-webkit-text-fill-color" and "color"?

body 
 font-size: 16px;
 font-family: Verdana, sans-serif;


.wrap 
 width: 50%;
 margin: 0 auto;
 border: 1px solid #ccc;
 text-align: center;
 background: linear-gradient(30deg, #FFF 50%, #adf175 50%);


h2 
 background: linear-gradient(30deg, #adf175 50%, #FFF 50%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;

<div class="wrap">
 <h2>Hello World</h2>
</div>

Caution : background-clip:text is an experimental tech

edited Nov 9 at 20:19

Temani Afif

59.2k93472

answered Nov 9 at 10:04

semuzaboi

1,65511127

add a comment |

up vote
5
down vote

Clipping is an excellent solution.

But if you have the freedom of applying the gradient on the text of h2 , then it can be done with a little switcheroo trick.

h2 
 background: linear-gradient(30deg, #adf175 50%, #FFF 50%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;

I had just reversed the gradient colors from the question above for the h2 and the div .

More info can be seen here

https://css-tricks.com/almanac/properties/b/background-clip/

Difference between "-webkit-text-fill-color" and "color"?

body 
 font-size: 16px;
 font-family: Verdana, sans-serif;


.wrap 
 width: 50%;
 margin: 0 auto;
 border: 1px solid #ccc;
 text-align: center;
 background: linear-gradient(30deg, #FFF 50%, #adf175 50%);


h2 
 background: linear-gradient(30deg, #adf175 50%, #FFF 50%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;

<div class="wrap">
 <h2>Hello World</h2>
</div>

Caution : background-clip:text is an experimental tech

edited Nov 9 at 20:19

Temani Afif

59.2k93472

answered Nov 9 at 10:04

semuzaboi

1,65511127

Clipping is an excellent solution.

But if you have the freedom of applying the gradient on the text of h2 , then it can be done with a little switcheroo trick.

h2 
 background: linear-gradient(30deg, #adf175 50%, #FFF 50%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;

I had just reversed the gradient colors from the question above for the h2 and the div .

More info can be seen here

https://css-tricks.com/almanac/properties/b/background-clip/

Difference between "-webkit-text-fill-color" and "color"?

body 
 font-size: 16px;
 font-family: Verdana, sans-serif;


.wrap 
 width: 50%;
 margin: 0 auto;
 border: 1px solid #ccc;
 text-align: center;
 background: linear-gradient(30deg, #FFF 50%, #adf175 50%);


h2 
 background: linear-gradient(30deg, #adf175 50%, #FFF 50%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;

<div class="wrap">
 <h2>Hello World</h2>
</div>

Caution : background-clip:text is an experimental tech

body 
 font-size: 16px;
 font-family: Verdana, sans-serif;


.wrap 
 width: 50%;
 margin: 0 auto;
 border: 1px solid #ccc;
 text-align: center;
 background: linear-gradient(30deg, #FFF 50%, #adf175 50%);


h2 
 background: linear-gradient(30deg, #adf175 50%, #FFF 50%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;

<div class="wrap">
 <h2>Hello World</h2>
</div>

body 
 font-size: 16px;
 font-family: Verdana, sans-serif;


.wrap 
 width: 50%;
 margin: 0 auto;
 border: 1px solid #ccc;
 text-align: center;
 background: linear-gradient(30deg, #FFF 50%, #adf175 50%);


h2 
 background: linear-gradient(30deg, #adf175 50%, #FFF 50%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;

<div class="wrap">
 <h2>Hello World</h2>
</div>

edited Nov 9 at 20:19

Temani Afif

59.2k93472

answered Nov 9 at 10:04

semuzaboi

1,65511127

edited Nov 9 at 20:19

Temani Afif

59.2k93472

edited Nov 9 at 20:19

Temani Afif

59.2k93472

edited Nov 9 at 20:19

Temani Afif

59.2k93472

answered Nov 9 at 10:04

semuzaboi

1,65511127

answered Nov 9 at 10:04

semuzaboi

1,65511127

answered Nov 9 at 10:04

semuzaboi

1,65511127

add a comment |

up vote
4
down vote

* 
 margin: 0;
 padding: 0


header 
 position: relative;
 height: 100vh;
 min-height: 500px;
 font: 900 35vmin/35vh cookie, cursive;
 text-align: center;
 color: #adf175;


header > div 
 min-height: 100%;


.foreground 
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background: #adf175;
 color: white;
 clip-path: polygon(30% 0, 100% 100%, 100% 0);


h2 
 position: fixed;

<header>
 <div>
 <h2>On A Mission</h2>
 </div>
 <div class="foreground">
 <h2>On A Mission</h2>
 </div>
</header>

Blend modes are fixed formulas which you can use creatively. They mix two overlapping images (visual appearances) together. So the parameters are the two overlaying pixels nothing else.

I just created a quick prototype. you can play with. Hope it helps.

If you want to go with clean code, you can create the second div with the help of javascript.

This tool could help you playing around with shapes.

edited 2 days ago

answered Nov 9 at 9:45

Matthi

379211

add a comment |

up vote
4
down vote

* 
 margin: 0;
 padding: 0


header 
 position: relative;
 height: 100vh;
 min-height: 500px;
 font: 900 35vmin/35vh cookie, cursive;
 text-align: center;
 color: #adf175;


header > div 
 min-height: 100%;


.foreground 
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background: #adf175;
 color: white;
 clip-path: polygon(30% 0, 100% 100%, 100% 0);


h2 
 position: fixed;

<header>
 <div>
 <h2>On A Mission</h2>
 </div>
 <div class="foreground">
 <h2>On A Mission</h2>
 </div>
</header>

Blend modes are fixed formulas which you can use creatively. They mix two overlapping images (visual appearances) together. So the parameters are the two overlaying pixels nothing else.

I just created a quick prototype. you can play with. Hope it helps.

If you want to go with clean code, you can create the second div with the help of javascript.

This tool could help you playing around with shapes.

edited 2 days ago

answered Nov 9 at 9:45

Matthi

379211

add a comment |

up vote
4
down vote

* 
 margin: 0;
 padding: 0


header 
 position: relative;
 height: 100vh;
 min-height: 500px;
 font: 900 35vmin/35vh cookie, cursive;
 text-align: center;
 color: #adf175;


header > div 
 min-height: 100%;


.foreground 
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background: #adf175;
 color: white;
 clip-path: polygon(30% 0, 100% 100%, 100% 0);


h2 
 position: fixed;

<header>
 <div>
 <h2>On A Mission</h2>
 </div>
 <div class="foreground">
 <h2>On A Mission</h2>
 </div>
</header>

Blend modes are fixed formulas which you can use creatively. They mix two overlapping images (visual appearances) together. So the parameters are the two overlaying pixels nothing else.

I just created a quick prototype. you can play with. Hope it helps.

If you want to go with clean code, you can create the second div with the help of javascript.

This tool could help you playing around with shapes.

edited 2 days ago

answered Nov 9 at 9:45

Matthi

379211

* 
 margin: 0;
 padding: 0


header 
 position: relative;
 height: 100vh;
 min-height: 500px;
 font: 900 35vmin/35vh cookie, cursive;
 text-align: center;
 color: #adf175;


header > div 
 min-height: 100%;


.foreground 
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background: #adf175;
 color: white;
 clip-path: polygon(30% 0, 100% 100%, 100% 0);


h2 
 position: fixed;

<header>
 <div>
 <h2>On A Mission</h2>
 </div>
 <div class="foreground">
 <h2>On A Mission</h2>
 </div>
</header>

Blend modes are fixed formulas which you can use creatively. They mix two overlapping images (visual appearances) together. So the parameters are the two overlaying pixels nothing else.

I just created a quick prototype. you can play with. Hope it helps.

If you want to go with clean code, you can create the second div with the help of javascript.

This tool could help you playing around with shapes.

* 
 margin: 0;
 padding: 0


header 
 position: relative;
 height: 100vh;
 min-height: 500px;
 font: 900 35vmin/35vh cookie, cursive;
 text-align: center;
 color: #adf175;


header > div 
 min-height: 100%;


.foreground 
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background: #adf175;
 color: white;
 clip-path: polygon(30% 0, 100% 100%, 100% 0);


h2 
 position: fixed;

<header>
 <div>
 <h2>On A Mission</h2>
 </div>
 <div class="foreground">
 <h2>On A Mission</h2>
 </div>
</header>

* 
 margin: 0;
 padding: 0


header 
 position: relative;
 height: 100vh;
 min-height: 500px;
 font: 900 35vmin/35vh cookie, cursive;
 text-align: center;
 color: #adf175;


header > div 
 min-height: 100%;


.foreground 
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background: #adf175;
 color: white;
 clip-path: polygon(30% 0, 100% 100%, 100% 0);


h2 
 position: fixed;

<header>
 <div>
 <h2>On A Mission</h2>
 </div>
 <div class="foreground">
 <h2>On A Mission</h2>
 </div>
</header>

edited 2 days ago

answered Nov 9 at 9:45

Matthi

379211

edited 2 days ago

answered Nov 9 at 9:45

Matthi

379211

answered Nov 9 at 9:45

Matthi

379211

answered Nov 9 at 9:45

Matthi

379211

add a comment |

up vote
1
down vote

So this can be done using background-clip: text - although this is not universally supported, it does work in the latest Chrome, Firefox and Edge:

.container 
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh;


.rotate 
 border: 1px solid #ddd;
 text-align: center;
 background: linear-gradient(75deg, #adf175 50%, transparent 50%);
 transform: rotate(-90deg);


.text 
 font-family: arial, sans-serif;
 font-size: 1.5em;
 font-weight: bold;
 padding: 5px;
 margin: 0;
 text-transform: uppercase;
 background: linear-gradient(75deg, #fff 50%, #adf175 50%);
 color: transparent;
 -webkit-background-clip: text;
 -moz-background-clip: text;
 background-clip: text;


.fit-text 
 font-size: 2.25rem;

<div class="container">

 <div class="rotate">
 <div class="text">we are on a
 <div class="fit-text">mission</div>
 </div>
 </div>

 <div class="rotate">
 <div class="text">we are on a<br/>mission</div>
 </div>
</div>

This solution includes rotating the result and expanding the last word to fit (the way your example image looks) - I have included a non-expanded version as well.

edited Nov 9 at 13:55

answered Nov 9 at 13:23

Raad

3,00111534

add a comment |

up vote
1
down vote

So this can be done using background-clip: text - although this is not universally supported, it does work in the latest Chrome, Firefox and Edge:

.container 
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh;


.rotate 
 border: 1px solid #ddd;
 text-align: center;
 background: linear-gradient(75deg, #adf175 50%, transparent 50%);
 transform: rotate(-90deg);


.text 
 font-family: arial, sans-serif;
 font-size: 1.5em;
 font-weight: bold;
 padding: 5px;
 margin: 0;
 text-transform: uppercase;
 background: linear-gradient(75deg, #fff 50%, #adf175 50%);
 color: transparent;
 -webkit-background-clip: text;
 -moz-background-clip: text;
 background-clip: text;


.fit-text 
 font-size: 2.25rem;

<div class="container">

 <div class="rotate">
 <div class="text">we are on a
 <div class="fit-text">mission</div>
 </div>
 </div>

 <div class="rotate">
 <div class="text">we are on a<br/>mission</div>
 </div>
</div>

This solution includes rotating the result and expanding the last word to fit (the way your example image looks) - I have included a non-expanded version as well.

edited Nov 9 at 13:55

answered Nov 9 at 13:23

Raad

3,00111534

add a comment |

up vote
1
down vote

So this can be done using background-clip: text - although this is not universally supported, it does work in the latest Chrome, Firefox and Edge:

.container 
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh;


.rotate 
 border: 1px solid #ddd;
 text-align: center;
 background: linear-gradient(75deg, #adf175 50%, transparent 50%);
 transform: rotate(-90deg);


.text 
 font-family: arial, sans-serif;
 font-size: 1.5em;
 font-weight: bold;
 padding: 5px;
 margin: 0;
 text-transform: uppercase;
 background: linear-gradient(75deg, #fff 50%, #adf175 50%);
 color: transparent;
 -webkit-background-clip: text;
 -moz-background-clip: text;
 background-clip: text;


.fit-text 
 font-size: 2.25rem;

<div class="container">

 <div class="rotate">
 <div class="text">we are on a
 <div class="fit-text">mission</div>
 </div>
 </div>

 <div class="rotate">
 <div class="text">we are on a<br/>mission</div>
 </div>
</div>

This solution includes rotating the result and expanding the last word to fit (the way your example image looks) - I have included a non-expanded version as well.

edited Nov 9 at 13:55

answered Nov 9 at 13:23

Raad

3,00111534

So this can be done using background-clip: text - although this is not universally supported, it does work in the latest Chrome, Firefox and Edge:

.container 
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh;


.rotate 
 border: 1px solid #ddd;
 text-align: center;
 background: linear-gradient(75deg, #adf175 50%, transparent 50%);
 transform: rotate(-90deg);


.text 
 font-family: arial, sans-serif;
 font-size: 1.5em;
 font-weight: bold;
 padding: 5px;
 margin: 0;
 text-transform: uppercase;
 background: linear-gradient(75deg, #fff 50%, #adf175 50%);
 color: transparent;
 -webkit-background-clip: text;
 -moz-background-clip: text;
 background-clip: text;


.fit-text 
 font-size: 2.25rem;

<div class="container">

 <div class="rotate">
 <div class="text">we are on a
 <div class="fit-text">mission</div>
 </div>
 </div>

 <div class="rotate">
 <div class="text">we are on a<br/>mission</div>
 </div>
</div>

This solution includes rotating the result and expanding the last word to fit (the way your example image looks) - I have included a non-expanded version as well.

.container 
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh;


.rotate 
 border: 1px solid #ddd;
 text-align: center;
 background: linear-gradient(75deg, #adf175 50%, transparent 50%);
 transform: rotate(-90deg);


.text 
 font-family: arial, sans-serif;
 font-size: 1.5em;
 font-weight: bold;
 padding: 5px;
 margin: 0;
 text-transform: uppercase;
 background: linear-gradient(75deg, #fff 50%, #adf175 50%);
 color: transparent;
 -webkit-background-clip: text;
 -moz-background-clip: text;
 background-clip: text;


.fit-text 
 font-size: 2.25rem;

<div class="container">

 <div class="rotate">
 <div class="text">we are on a
 <div class="fit-text">mission</div>
 </div>
 </div>

 <div class="rotate">
 <div class="text">we are on a<br/>mission</div>
 </div>
</div>

.container 
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh;


.rotate 
 border: 1px solid #ddd;
 text-align: center;
 background: linear-gradient(75deg, #adf175 50%, transparent 50%);
 transform: rotate(-90deg);


.text 
 font-family: arial, sans-serif;
 font-size: 1.5em;
 font-weight: bold;
 padding: 5px;
 margin: 0;
 text-transform: uppercase;
 background: linear-gradient(75deg, #fff 50%, #adf175 50%);
 color: transparent;
 -webkit-background-clip: text;
 -moz-background-clip: text;
 background-clip: text;


.fit-text 
 font-size: 2.25rem;

<div class="container">

 <div class="rotate">
 <div class="text">we are on a
 <div class="fit-text">mission</div>
 </div>
 </div>

 <div class="rotate">
 <div class="text">we are on a<br/>mission</div>
 </div>
</div>

edited Nov 9 at 13:55

answered Nov 9 at 13:23

Raad

3,00111534

edited Nov 9 at 13:55

answered Nov 9 at 13:23

Raad

3,00111534

answered Nov 9 at 13:23

Raad

3,00111534

answered Nov 9 at 13:23

Raad

3,00111534

add a comment |

up vote
1
down vote

Here is another idea using more supported features than clip-path and background-clip:text. The idea is to rely on skew transformation and some hidden overflow.

I used CSS variables for better flexibility but they can easily be omitted in case we need old browser support.

:root 
 --c1:#adf175;
 --c2:#f3f3f3;


.box 
 font-size: 20px;
 font-family: Verdana, sans-serif;
 color:var(--c1);
 background:var(--c2);
 padding:20px;
 position:relative;
 display:inline-block;
 overflow:hidden;

.box:before 
 content:var(--text);

.box span 
 position:absolute;
 top:0;
 left:-20px;
 right:var(--p,50%);
 bottom:0;
 padding:inherit;
 background:var(--c1);
 color:var(--c2);
 white-space:nowrap;
 overflow:hidden;
 transform:skew(15deg);

.box span:before
 content:var(--text);
 display:inline-block;
 margin-left:20px; /*Same value as left on the span*/
 transform:skew(-15deg); /*same value as the skew on the span*/

<div class="box" style="--text:'Lorem Ipsum'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:20%">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:80%">
<span></span>
</div>

We can introduce another variable to control the skewing:

:root 
 --c1:#adf175;
 --c2:#f3f3f3;

.box 
 font-size: 20px;
 font-family: Verdana, sans-serif;
 color:var(--c1);
 background-color:var(--c2);
 padding:20px;
 position:relative;
 display:inline-block;
 overflow:hidden;

.box:before 
 content:var(--text);

.box span 
 position:absolute;
 top:0;
 left:-50px;
 right:var(--p,50%);
 bottom:0;
 padding:inherit;
 color:var(--c2);
 background-color:var(--c1);
 white-space:nowrap;
 overflow:hidden;
 transform:skew(var(--s,15deg));

.box span:before
 content:var(--text);
 display:inline-block;
 margin-left:50px; /*Same value as left on the span*/
 transform:skew(calc(-1 * var(--s,15deg)));

<div class="box" style="--text:'Lorem Ipsum'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:20%;--s:-30deg">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:70%;--s:45deg">
<span></span>
</div>

We can also consider multiline text:

:root 
 --c1:#adf175;
 --c2:#f3f3f3;

.box 
 font-size: 20px;
 font-family: Verdana, sans-serif;
 color:var(--c1);
 background-color:var(--c2);
 padding:20px;
 position:relative;
 display:inline-block;
 overflow:hidden;
 --w:140px;
 width:var(--w); /*we fix the width to have multiple lines*/

.box:before 
 content:var(--text);

.box span 
 position:absolute;
 top:0;
 left:-50px;
 right:var(--p,50%);
 bottom:0;
 padding:inherit;
 color:var(--c2);
 background-color:var(--c1);
 overflow:hidden;
 transform:skew(var(--s,15deg));

.box span:before
 content:var(--text);
 width:var(--w); /* we use the same width as the box*/
 display:inline-block;
 margin-left:50px; /*Same value as left on the span*/
 transform:skew(calc(-1 * var(--s,15deg)));

<div class="box" style="--text:'Lorem Ipsum dolert text'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum dolert text';--p:20%;--s:-30deg">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum dolert text';--p:40%;--s:45deg">
<span></span>
</div>

edited Nov 10 at 19:07

answered Nov 9 at 20:11

Temani Afif

59.2k93472

add a comment |

up vote
1
down vote

Here is another idea using more supported features than clip-path and background-clip:text. The idea is to rely on skew transformation and some hidden overflow.

I used CSS variables for better flexibility but they can easily be omitted in case we need old browser support.

:root 
 --c1:#adf175;
 --c2:#f3f3f3;


.box 
 font-size: 20px;
 font-family: Verdana, sans-serif;
 color:var(--c1);
 background:var(--c2);
 padding:20px;
 position:relative;
 display:inline-block;
 overflow:hidden;

.box:before 
 content:var(--text);

.box span 
 position:absolute;
 top:0;
 left:-20px;
 right:var(--p,50%);
 bottom:0;
 padding:inherit;
 background:var(--c1);
 color:var(--c2);
 white-space:nowrap;
 overflow:hidden;
 transform:skew(15deg);

.box span:before
 content:var(--text);
 display:inline-block;
 margin-left:20px; /*Same value as left on the span*/
 transform:skew(-15deg); /*same value as the skew on the span*/

<div class="box" style="--text:'Lorem Ipsum'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:20%">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:80%">
<span></span>
</div>

We can introduce another variable to control the skewing:

:root 
 --c1:#adf175;
 --c2:#f3f3f3;

.box 
 font-size: 20px;
 font-family: Verdana, sans-serif;
 color:var(--c1);
 background-color:var(--c2);
 padding:20px;
 position:relative;
 display:inline-block;
 overflow:hidden;

.box:before 
 content:var(--text);

.box span 
 position:absolute;
 top:0;
 left:-50px;
 right:var(--p,50%);
 bottom:0;
 padding:inherit;
 color:var(--c2);
 background-color:var(--c1);
 white-space:nowrap;
 overflow:hidden;
 transform:skew(var(--s,15deg));

.box span:before
 content:var(--text);
 display:inline-block;
 margin-left:50px; /*Same value as left on the span*/
 transform:skew(calc(-1 * var(--s,15deg)));

<div class="box" style="--text:'Lorem Ipsum'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:20%;--s:-30deg">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:70%;--s:45deg">
<span></span>
</div>

We can also consider multiline text:

:root 
 --c1:#adf175;
 --c2:#f3f3f3;

.box 
 font-size: 20px;
 font-family: Verdana, sans-serif;
 color:var(--c1);
 background-color:var(--c2);
 padding:20px;
 position:relative;
 display:inline-block;
 overflow:hidden;
 --w:140px;
 width:var(--w); /*we fix the width to have multiple lines*/

.box:before 
 content:var(--text);

.box span 
 position:absolute;
 top:0;
 left:-50px;
 right:var(--p,50%);
 bottom:0;
 padding:inherit;
 color:var(--c2);
 background-color:var(--c1);
 overflow:hidden;
 transform:skew(var(--s,15deg));

.box span:before
 content:var(--text);
 width:var(--w); /* we use the same width as the box*/
 display:inline-block;
 margin-left:50px; /*Same value as left on the span*/
 transform:skew(calc(-1 * var(--s,15deg)));

<div class="box" style="--text:'Lorem Ipsum dolert text'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum dolert text';--p:20%;--s:-30deg">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum dolert text';--p:40%;--s:45deg">
<span></span>
</div>

edited Nov 10 at 19:07

answered Nov 9 at 20:11

Temani Afif

59.2k93472

add a comment |

up vote
1
down vote

Here is another idea using more supported features than clip-path and background-clip:text. The idea is to rely on skew transformation and some hidden overflow.

I used CSS variables for better flexibility but they can easily be omitted in case we need old browser support.

:root 
 --c1:#adf175;
 --c2:#f3f3f3;


.box 
 font-size: 20px;
 font-family: Verdana, sans-serif;
 color:var(--c1);
 background:var(--c2);
 padding:20px;
 position:relative;
 display:inline-block;
 overflow:hidden;

.box:before 
 content:var(--text);

.box span 
 position:absolute;
 top:0;
 left:-20px;
 right:var(--p,50%);
 bottom:0;
 padding:inherit;
 background:var(--c1);
 color:var(--c2);
 white-space:nowrap;
 overflow:hidden;
 transform:skew(15deg);

.box span:before
 content:var(--text);
 display:inline-block;
 margin-left:20px; /*Same value as left on the span*/
 transform:skew(-15deg); /*same value as the skew on the span*/

<div class="box" style="--text:'Lorem Ipsum'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:20%">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:80%">
<span></span>
</div>

We can introduce another variable to control the skewing:

:root 
 --c1:#adf175;
 --c2:#f3f3f3;

.box 
 font-size: 20px;
 font-family: Verdana, sans-serif;
 color:var(--c1);
 background-color:var(--c2);
 padding:20px;
 position:relative;
 display:inline-block;
 overflow:hidden;

.box:before 
 content:var(--text);

.box span 
 position:absolute;
 top:0;
 left:-50px;
 right:var(--p,50%);
 bottom:0;
 padding:inherit;
 color:var(--c2);
 background-color:var(--c1);
 white-space:nowrap;
 overflow:hidden;
 transform:skew(var(--s,15deg));

.box span:before
 content:var(--text);
 display:inline-block;
 margin-left:50px; /*Same value as left on the span*/
 transform:skew(calc(-1 * var(--s,15deg)));

<div class="box" style="--text:'Lorem Ipsum'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:20%;--s:-30deg">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:70%;--s:45deg">
<span></span>
</div>

We can also consider multiline text:

:root 
 --c1:#adf175;
 --c2:#f3f3f3;

.box 
 font-size: 20px;
 font-family: Verdana, sans-serif;
 color:var(--c1);
 background-color:var(--c2);
 padding:20px;
 position:relative;
 display:inline-block;
 overflow:hidden;
 --w:140px;
 width:var(--w); /*we fix the width to have multiple lines*/

.box:before 
 content:var(--text);

.box span 
 position:absolute;
 top:0;
 left:-50px;
 right:var(--p,50%);
 bottom:0;
 padding:inherit;
 color:var(--c2);
 background-color:var(--c1);
 overflow:hidden;
 transform:skew(var(--s,15deg));

.box span:before
 content:var(--text);
 width:var(--w); /* we use the same width as the box*/
 display:inline-block;
 margin-left:50px; /*Same value as left on the span*/
 transform:skew(calc(-1 * var(--s,15deg)));

<div class="box" style="--text:'Lorem Ipsum dolert text'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum dolert text';--p:20%;--s:-30deg">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum dolert text';--p:40%;--s:45deg">
<span></span>
</div>

edited Nov 10 at 19:07

answered Nov 9 at 20:11

Temani Afif

59.2k93472

Here is another idea using more supported features than clip-path and background-clip:text. The idea is to rely on skew transformation and some hidden overflow.

I used CSS variables for better flexibility but they can easily be omitted in case we need old browser support.

:root 
 --c1:#adf175;
 --c2:#f3f3f3;


.box 
 font-size: 20px;
 font-family: Verdana, sans-serif;
 color:var(--c1);
 background:var(--c2);
 padding:20px;
 position:relative;
 display:inline-block;
 overflow:hidden;

.box:before 
 content:var(--text);

.box span 
 position:absolute;
 top:0;
 left:-20px;
 right:var(--p,50%);
 bottom:0;
 padding:inherit;
 background:var(--c1);
 color:var(--c2);
 white-space:nowrap;
 overflow:hidden;
 transform:skew(15deg);

.box span:before
 content:var(--text);
 display:inline-block;
 margin-left:20px; /*Same value as left on the span*/
 transform:skew(-15deg); /*same value as the skew on the span*/

<div class="box" style="--text:'Lorem Ipsum'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:20%">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:80%">
<span></span>
</div>

We can introduce another variable to control the skewing:

:root 
 --c1:#adf175;
 --c2:#f3f3f3;

.box 
 font-size: 20px;
 font-family: Verdana, sans-serif;
 color:var(--c1);
 background-color:var(--c2);
 padding:20px;
 position:relative;
 display:inline-block;
 overflow:hidden;

.box:before 
 content:var(--text);

.box span 
 position:absolute;
 top:0;
 left:-50px;
 right:var(--p,50%);
 bottom:0;
 padding:inherit;
 color:var(--c2);
 background-color:var(--c1);
 white-space:nowrap;
 overflow:hidden;
 transform:skew(var(--s,15deg));

.box span:before
 content:var(--text);
 display:inline-block;
 margin-left:50px; /*Same value as left on the span*/
 transform:skew(calc(-1 * var(--s,15deg)));

<div class="box" style="--text:'Lorem Ipsum'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:20%;--s:-30deg">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:70%;--s:45deg">
<span></span>
</div>

We can also consider multiline text:

:root 
 --c1:#adf175;
 --c2:#f3f3f3;

.box 
 font-size: 20px;
 font-family: Verdana, sans-serif;
 color:var(--c1);
 background-color:var(--c2);
 padding:20px;
 position:relative;
 display:inline-block;
 overflow:hidden;
 --w:140px;
 width:var(--w); /*we fix the width to have multiple lines*/

.box:before 
 content:var(--text);

.box span 
 position:absolute;
 top:0;
 left:-50px;
 right:var(--p,50%);
 bottom:0;
 padding:inherit;
 color:var(--c2);
 background-color:var(--c1);
 overflow:hidden;
 transform:skew(var(--s,15deg));

.box span:before
 content:var(--text);
 width:var(--w); /* we use the same width as the box*/
 display:inline-block;
 margin-left:50px; /*Same value as left on the span*/
 transform:skew(calc(-1 * var(--s,15deg)));

<div class="box" style="--text:'Lorem Ipsum dolert text'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum dolert text';--p:20%;--s:-30deg">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum dolert text';--p:40%;--s:45deg">
<span></span>
</div>

:root 
 --c1:#adf175;
 --c2:#f3f3f3;


.box 
 font-size: 20px;
 font-family: Verdana, sans-serif;
 color:var(--c1);
 background:var(--c2);
 padding:20px;
 position:relative;
 display:inline-block;
 overflow:hidden;

.box:before 
 content:var(--text);

.box span 
 position:absolute;
 top:0;
 left:-20px;
 right:var(--p,50%);
 bottom:0;
 padding:inherit;
 background:var(--c1);
 color:var(--c2);
 white-space:nowrap;
 overflow:hidden;
 transform:skew(15deg);

.box span:before
 content:var(--text);
 display:inline-block;
 margin-left:20px; /*Same value as left on the span*/
 transform:skew(-15deg); /*same value as the skew on the span*/

<div class="box" style="--text:'Lorem Ipsum'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:20%">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:80%">
<span></span>
</div>

:root 
 --c1:#adf175;
 --c2:#f3f3f3;


.box 
 font-size: 20px;
 font-family: Verdana, sans-serif;
 color:var(--c1);
 background:var(--c2);
 padding:20px;
 position:relative;
 display:inline-block;
 overflow:hidden;

.box:before 
 content:var(--text);

.box span 
 position:absolute;
 top:0;
 left:-20px;
 right:var(--p,50%);
 bottom:0;
 padding:inherit;
 background:var(--c1);
 color:var(--c2);
 white-space:nowrap;
 overflow:hidden;
 transform:skew(15deg);

.box span:before
 content:var(--text);
 display:inline-block;
 margin-left:20px; /*Same value as left on the span*/
 transform:skew(-15deg); /*same value as the skew on the span*/

<div class="box" style="--text:'Lorem Ipsum'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:20%">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:80%">
<span></span>
</div>

:root 
 --c1:#adf175;
 --c2:#f3f3f3;

.box 
 font-size: 20px;
 font-family: Verdana, sans-serif;
 color:var(--c1);
 background-color:var(--c2);
 padding:20px;
 position:relative;
 display:inline-block;
 overflow:hidden;

.box:before 
 content:var(--text);

.box span 
 position:absolute;
 top:0;
 left:-50px;
 right:var(--p,50%);
 bottom:0;
 padding:inherit;
 color:var(--c2);
 background-color:var(--c1);
 white-space:nowrap;
 overflow:hidden;
 transform:skew(var(--s,15deg));

.box span:before
 content:var(--text);
 display:inline-block;
 margin-left:50px; /*Same value as left on the span*/
 transform:skew(calc(-1 * var(--s,15deg)));

<div class="box" style="--text:'Lorem Ipsum'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:20%;--s:-30deg">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:70%;--s:45deg">
<span></span>
</div>

:root 
 --c1:#adf175;
 --c2:#f3f3f3;

.box 
 font-size: 20px;
 font-family: Verdana, sans-serif;
 color:var(--c1);
 background-color:var(--c2);
 padding:20px;
 position:relative;
 display:inline-block;
 overflow:hidden;

.box:before 
 content:var(--text);

.box span 
 position:absolute;
 top:0;
 left:-50px;
 right:var(--p,50%);
 bottom:0;
 padding:inherit;
 color:var(--c2);
 background-color:var(--c1);
 white-space:nowrap;
 overflow:hidden;
 transform:skew(var(--s,15deg));

.box span:before
 content:var(--text);
 display:inline-block;
 margin-left:50px; /*Same value as left on the span*/
 transform:skew(calc(-1 * var(--s,15deg)));

<div class="box" style="--text:'Lorem Ipsum'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:20%;--s:-30deg">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:70%;--s:45deg">
<span></span>
</div>

:root 
 --c1:#adf175;
 --c2:#f3f3f3;

.box 
 font-size: 20px;
 font-family: Verdana, sans-serif;
 color:var(--c1);
 background-color:var(--c2);
 padding:20px;
 position:relative;
 display:inline-block;
 overflow:hidden;
 --w:140px;
 width:var(--w); /*we fix the width to have multiple lines*/

.box:before 
 content:var(--text);

.box span 
 position:absolute;
 top:0;
 left:-50px;
 right:var(--p,50%);
 bottom:0;
 padding:inherit;
 color:var(--c2);
 background-color:var(--c1);
 overflow:hidden;
 transform:skew(var(--s,15deg));

.box span:before
 content:var(--text);
 width:var(--w); /* we use the same width as the box*/
 display:inline-block;
 margin-left:50px; /*Same value as left on the span*/
 transform:skew(calc(-1 * var(--s,15deg)));

<div class="box" style="--text:'Lorem Ipsum dolert text'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum dolert text';--p:20%;--s:-30deg">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum dolert text';--p:40%;--s:45deg">
<span></span>
</div>

:root 
 --c1:#adf175;
 --c2:#f3f3f3;

.box 
 font-size: 20px;
 font-family: Verdana, sans-serif;
 color:var(--c1);
 background-color:var(--c2);
 padding:20px;
 position:relative;
 display:inline-block;
 overflow:hidden;
 --w:140px;
 width:var(--w); /*we fix the width to have multiple lines*/

.box:before 
 content:var(--text);

.box span 
 position:absolute;
 top:0;
 left:-50px;
 right:var(--p,50%);
 bottom:0;
 padding:inherit;
 color:var(--c2);
 background-color:var(--c1);
 overflow:hidden;
 transform:skew(var(--s,15deg));

.box span:before
 content:var(--text);
 width:var(--w); /* we use the same width as the box*/
 display:inline-block;
 margin-left:50px; /*Same value as left on the span*/
 transform:skew(calc(-1 * var(--s,15deg)));

<div class="box" style="--text:'Lorem Ipsum dolert text'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum dolert text';--p:20%;--s:-30deg">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum dolert text';--p:40%;--s:45deg">
<span></span>
</div>

edited Nov 10 at 19:07

answered Nov 9 at 20:11

Temani Afif

59.2k93472

edited Nov 10 at 19:07

answered Nov 9 at 20:11

Temani Afif

59.2k93472

answered Nov 9 at 20:11

Temani Afif

59.2k93472

answered Nov 9 at 20:11

Temani Afif

59.2k93472

add a comment |

Nic is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Nic is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Post as a guest

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Pfthb