How I do the slanted background style?

Question

How I do the slanted background style on this label? I tried using clip-path but that didn't work, not sure what else to do. I tried using pseudo-element too but it was so inconsistent with different words in the label. The heights were off on each of the labels. Is there a way to do this as a background?

The white is the background of the label in the screenshot attached.

body {
  background-color: grey;
}
.label {
  background-color: white;
  width: fit-content;
  font-size: 25px;
  line-height: 1;
  padding: 10px 10px 10px 15px;
/*   clip-path: polygon(100% 0, 0 100%, 100% 100%); */
}

<div class="label">
  North Sydney
</div>

You can do this with linear gradients. I'm sure if you dig a little bit you'll find the answer you're looking for. — Ross, Aug 20 '22 at 02:29

score 1 · Answer 1 · answered Aug 20 '22 at 03:04

1

Having the .label positionned relative and a pseudo element positioned abolute gives something like this.

it was so inconsistent with different words in the label.

I can't see how...

body {
  background-color: grey;
}
.label {
  position: relative;
  background-color: white;
  width: fit-content;
  font-size: 25px;
  line-height: 1;
  padding: 10px 10px 10px 45px;
}
.label:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 45px;
  background-color: #97AFE1;
  clip-path: polygon(0% 0%,0% 100%,100% 0%);
}

<div class="label">
  North Sydney
</div>

<br>

<div class="label">
  Super long place name where to live in the world...
</div>

answered Aug 20 '22 at 03:04

Louys Patrice Bessette

33,375
6
36
64

Good answer . I focused on using just the existing element and no pseudo classes. – Dan Mullin Aug 20 '22 at 03:15
@DanMullin ;) Corners like this usually are pseudo elements. – Louys Patrice Bessette Aug 20 '22 at 03:18
I try to optimize so much it’s painful lol. You’re right though. pseudo elements were practically made for this exact purpose. – Dan Mullin Aug 20 '22 at 03:20

Dan Mullin · Answer 2 · 2022-08-20T03:18:58.460

There are a few optimizations you could make as well as using a liner gradient.

html {
  height: 100%;
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}
body {
  background: #333;
  min-height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
}
.label {
  background: linear-gradient(135deg, #97afe1, #97afe1 22%, #fff 23%);
  font-size: 25px;
  line-height: 1.67;
  padding: 10px 13px 10px 50px;
  text-align: right;
}

<div class="label">
  North Sydney
</div>

score 0 · Answer 3 · answered Aug 20 '22 at 03:30

You can use an absolute positioned .label::before:

body {
  background-color: grey;
}
.label {
  background-color: white;
  width: fit-content;
  height: 30px;
  font-size: 25px;
  line-height: 1;
  padding: 10px 10px 10px 55px;
}
.label::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  margin: 8px 0 0 8px;
  border-style: solid;
  border-width: 0 0 50px 50px;
  border-color: #97AFE1 #97AFE1 transparent #97AFE1;
}

<div class="label">
  North Sydney
</div>

score 0 · Answer 4 · answered Aug 20 '22 at 07:51

hi you can set a picture for your background with tag :

body {
background-image:url('https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg?w=2000');}

<!DOCTYPE html>
<html>
    <head>
    </head>
  <body>
    <img src="http://modirezehn.com/wp-content/uploads/2015/08/index.jpg" width="240px" height="240px" class="imagestyle" >
</a>
<h2 class="namestyle" >Samurai_Asli</h2>
<hr>
<h2 class="titlestyle" >Samurai_Asli</h2>
<p class="firstparagraph" >     ما زیاد چرخیدیم تقصیر فلک نبوده     </p>
<p class="secendparagraph" >حسبی الله</p>
    </body>
</html>

YOU CAN WITH A Oblique photo make a Oblique background

How I do the slanted background style?

4 Answers4