Text hidden outside the CSS border

Question

I am trying to create a h1 style that surrounds text with a background color.

h1.skew { padding-left: 10px; text-decoration: none; color: white; font-weight: bold; display: inline-block; border-right: 50px solid transparent; border-top: 50px solid #4c4c4c; height: 0; line-height: 50px; } 

  <h1 class="skew">HELLO WORLD</h1> 

https://jsfiddle.net/zo32q98n/

At this point, the text appears under the background. How to make text appear on a brown background?

Answer 1

Since the border is 50px, you can insert a negative margin of the same amount inside:

 h1.skew::before { content: ''; display: block; margin-top: -50px; } 

 body { background: #ddd; } h1.skew { padding-left: 10px; text-decoration: none; color: white; font-weight: bold; display: inline-block; border-right: 50px solid transparent; border-top: 50px solid #4c4c4c; height: 0; line-height: 50px; } h1.skew::before { content: ''; display: block; margin-top: -50px; } 

 <h1 class="skew">HELLO WORLD</h1> 

Answer 2

You can use pseudo-element for the background and set z-index: -1 so that it appears under the text.

 h1.skew { padding-left: 10px; text-decoration: none; color: white; font-weight: bold; display: inline-block; position: relative; height: 0; line-height: 50px; } h1.skew:before { content: ''; z-index: -1; border-right: 50px solid transparent; border-top: 50px solid #4c4c4c; height: 100%; position: absolute; top: 0; left: 0; width: 100%; } 

 <h1 class="skew">HELLO WORLD</h1> 

Answer 3

You can use CSS3 linear-gradient() .

 h1.skew { padding: 10px 80px 10px 10px; display: inline-block; color: white; background: #4c4c4c; /* fallback */ background: linear-gradient(135deg, #4c4c4c 80%, transparent 80%); } 

 <h1 class="skew">HELLO WORLD</h1> 

Answer 4

Alternatively, there is no problem if you use border-bottom instead of border-top .

 body { background: #ddd; } h1.skew { padding-left: 10px; text-decoration: none; color: white; font-weight: bold; display: inline-block; border-right: 50px solid transparent; border-bottom: 50px solid #4c4c4c; height: 0; line-height: 50px; } 

 <h1 class="skew">HELLO WORLD</h1> 

Answer 5

You can wrap text in span ...

 <h1 class="skew"><span class="text">HELLO WORLD</span></h1> 

And then add the following to your stylesheet ...

 span.text { position: relative; top: -50px; } 

This will move the text up so that it appears above a certain border.