Html Question posted in
Some basic documentation can be found here.

Html – Text with slanted background

I want to have text (in this case inside a <h1>) to have colorful background, where the right and left boundaries are slanted. Something like this:

Text 'This is a title' with a colorful background

I know that I should do this by setting a backround like linear-gradient(102deg, #ffffff00 5%, lightblue 5% 95%, #ffffff00 95%); (which I used for this example), but I cannot get the left and right boundaries right. I think the problem is that I to need set start and stop values for the gradient (5% and 95% in this example), but that means that depending on the length of the text, the transition is "somewhere".

h1 span {
  background: linear-gradient(102deg, #ffffff00 5%, lightblue 5% 95%, #ffffff00 95%);
  padding-left: 0.8rem;
  margin-right: 1rem;
}
<h1> <span> This is a title </span> </h1>

JSFiddle

Note that I manually had to play around with padding-left and margin-right to somehow make it appear okayish (even though there is way too much space right of "title"?).

If I make the text longer, the same CSS produces this:

A longer title with colorful background

This is probably because 5% and 95% of the <span>‘s width are now at different positions, right?

What I would want is a solution that:

  • Always works idenpentently of the length of the text
  • Does not skew the text itself
  • Works with multiline text
  • Does not cut off the slanted background (see the right boundary of the second example above)
  • Has a little space between the first letter and the left boundary of the background box, and the same amount of space between the last letter and the right boundary of the background box.

I tried setting the boundaries for the linear-gradient to 0.001% and 99.999% or something, but that essentially removes the slanted borders:

A longer title, this time the background is not slanted at all

Tags:

4

Answers


  1. 0

    You can use skew property of transofrm.

    Please replace background colour with your gradients.

    Hope this helps.

    h1 {
  padding: 2px;
  background: #000;
}
h1 span {
  background: red;
  display: inline-block;
  transform: skew(-20deg);
  padding: 5px;
  color: #FFF;
}
    <h1> <span> This is a title </span> </h1>
    Login or Signup to reply.
  2. 0

    What you are locking for is the property transform: skew().

    Just give the container its value and its child elements the opposite one.

    .skew {
  background: #ff00ff;
  text-align: center;
  padding: 1rem;
  width: 60%;
  transform: skew(-20deg);
  margin: 0 auto;
}

h1 {
  transform: skew(20deg);
}
    <div class="skew">
  <h1>Hello World!</h1>
</div>
    Login or Signup to reply.
  3. 0

    Just use padding-left and padding-right 5%, because that’s the padding of the linear-gradient too.

    h1 span {
  background: linear-gradient(102deg, #ffffff00 5%, lightblue 5% 95%, #ffffff00 95%);
  padding-left: 5%;
  padding-right: 5%;
}
    <h1> <span> This is a title </span> </h1>
    Login or Signup to reply.
  4. 0 
    h1 {
  padding: 2px;
  background: #000;
}
h1 span {
  display: inline-block;
  padding: 5px 15px;
  color: #FFF;
  position:relative;
  z-index:0;
}
h1 span:before{
  position:absolute;
  content:'';
  background:linear-gradient(102deg, #ffffff00 5%, lightblue 5% 95%, #ffffff00 95%);;
  left:0;
  right:0;
  top:0;
  bottom:0;
  transform: skew(-20deg);
  z-index:-1;
}
    <h1> <span> This is a title </span> </h1>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search