Add corner label using ::before-CodePudding

I want to make a corner label for my div. The thing is, I have to make it by only using ::before. I am not able to change the HTML, so the words 'MEEST GEKOZEN' needs to be added with content: 'MEEST GEKOZEN' in the CSS.

It needs to look like the orange label in this image:

This is the code:

* {
  margin: 0;
  padding: 0;
  font-family: 'Arial';
}

body {
  background-color: #e9f8f6;
}

div {
  background-color: white;
  border-radius: 20px;
  width: 150px;
  height: 175px;
  margin: 10px;
  padding: 10px;
  display: inline-block;
}

ul {
  margin-top: 20px;
  list-style-type: none;
}

<div>
  <h1>Title</h1>
  <ul>
    <li><p>This is an item</p></li>
    <li><p>This is an item</p></li>
    <li><p>This is an item</p></li>
    <li><p>This is an item</p></li>
  </ul>
</div>

<div>
  <h1>Title</h1>
  <ul>
    <li><p>This is an item</p></li>
    <li><p>This is an item</p></li>
    <li><p>This is an item</p></li>
    <li><p>This is an item</p></li>
  </ul>
</div>

<div>
  <h1>Title</h1>
  <ul>
    <li><p>This is an item</p></li>
    <li><p>This is an item</p></li>
    <li><p>This is an item</p></li>
    <li><p>This is an item</p></li>
  </ul>
</div>

Does someone have a solution?

CodePudding user response：

I tested it on my side, and I have a solution that should work. Add these two properties to your div element to change the positioning and hide any overlap from your :before

div {
    overflow: hidden;
    position: relative;
}

and add this CSS for your :before pseudo element:

div:before {
    content: "MEEST GEKOZEN";
    position: absolute;
    top: 0px;
    right: -27px;
    width: 75px;
    text-align: center;
    transform: rotate(45deg);
    background: darkorange;
    padding: 10px;
    color: white;
    font-size: 9px;
    font-weight: 600;
}

The position: relative on the div and the position: absolute on the :before allows you to position the pseudo element to the top right of the container.

Feel free to make any adjustment to the top and left properties if you need to position it more.

Working example:

* {
  margin: 0;
  padding: 0;
  font-family: 'Arial';
}

body {
  background-color: #e9f8f6;
}

ul {
  margin-top: 20px;
  list-style-type: none;
}

div {
  overflow: hidden;
  position: relative;
  background-color: white;
  border-radius: 20px;
  width: 150px;
  height: 175px;
  margin: 10px;
  padding: 10px;
  display: inline-block;
}

div:before {
  content: "MEEST GEKOZEN";
  position: absolute;
  top: 0px;
  right: -27px;
  width: 75px;
  text-align: center;
  transform: rotate(45deg);
  background: peru;
  padding: 10px;
  color: white;
  font-size: 9px;
  font-weight: 600;
}

<div>
  <h1>Title</h1>
  <ul>
    <li><p>This is an item</p></li>
    <li><p>This is an item</p></li>
    <li><p>This is an item</p></li>
    <li><p>This is an item</p></li>
  </ul>
</div>

CodePudding user response：

You should set the position property to put your element in right place and then use transform to rotate it.

* {
  margin: 0;
  padding: 0;
  font-family: 'Arial';
}

body {
  background-color: #e9f8f6;
}

div {
  display: inline-block;
  position: relative;
  background-color: white;
  border-radius: 20px;
  width: 150px;
  height: 175px;
  margin: 10px;
  padding: 10px;
  overflow: hidden;
}
div::before{
    content: "MEEST GEKOZEN";
    position: absolute;
    top: 0px;
    right: -27px;
    width: 75px;
    transform: rotate(45deg);
    background: darkorange;
    padding: 10px ;
    text-align: center;
    color: white;
    font-size: 9px;
    font-weight: bold;
}

ul {
  margin-top: 20px;
  list-style-type: none;
}

<div>
  <h1>Title</h1>
  <ul>
    <li><p>This is an item</p></li>
    <li><p>This is an item</p></li>
    <li><p>This is an item</p></li>
    <li><p>This is an item</p></li>
  </ul>
</div>

<div>
  <h1>Title</h1>
  <ul>
    <li><p>This is an item</p></li>
    <li><p>This is an item</p></li>
    <li><p>This is an item</p></li>
    <li><p>This is an item</p></li>
  </ul>
</div>

<div>
  <h1>Title</h1>
  <ul>
    <li><p>This is an item</p></li>
    <li><p>This is an item</p></li>
    <li><p>This is an item</p></li>
    <li><p>This is an item</p></li>
  </ul>
</div>