How I do the slanted background style?-CodePudding

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 >
  North Sydney
</div>

CodePudding user response：

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 >
  North Sydney
</div>

<br>

<div >
  Super long place name where to live in the world...
</div>

CodePudding user response：

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 >
  North Sydney
</div>

CodePudding user response：

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 >
  North Sydney
</div>