Home / Questions / 381520
Accepted
Danilo
Asked: 2020-08-13 13:22:02 +0800 CST 2020-08-13 13:22:02 +0800 CST

How to display diagonal text at the top of an image with CSS?

  • 772

I currently display some text at the top of an image:

 .container {
  position: relative;
}

.text-block {
  position: absolute;
  color: white;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color:#17d90d;
  font-weight: bold;
  padding:5px;
  

}
<h2>Image Text Blocks</h2>
<div class="container">
  <img src="http://lorempixel.com/640/360" alt="Nature" style="width:100%;">
  <div class="text-block">
    Oferta
  </div>
</div>

But what I want is that the word offer is displayed diagonally, and I tried with rotate, but it fails. What I want is for it to look like this:

enter image description here

The idea is that the text of the word offer is displayed the same as the photo. How could it be done?

html

2 Answers

  1. Best Answer

    This is one way to do it, adding a wrapper to make it triangular, and rotating the text:

    .container {
  position: relative;
}

#triangle-topleft {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 0;
  height: 0;
  border-top: 100px solid #17d90d;
  border-right: 100px solid transparent;
  }

.text-block {
  color: white;
  position: relative;
  top: -60px;
  left: 15px;
  font-weight: bold;
  padding:5px;
  transform: rotate(-45deg);
}
    <h2>Image Text Blocks</h2>
<div class="container">
  <img src="http://lorempixel.com/640/360" alt="Nature" style="width:100%;">
  <div id="triangle-topleft">
    <div class="text-block">
      Oferta
    </div>
  </div>
</div>

    • 6

  2. Mainly you should add a tag to your text so you can manipulate just that section something like this:

    <h2>Image Text Blocks</h2>
<div class="container">
  <img src="http://lorempixel.com/640/360" alt="Nature" style="width:100%;">
  <div class="text-block">
    <span>Oferta</span>
  </div>
</div>

    Now inside your css add the following line:

    .text-block span {
  transform: rotate(-45deg);
 }

    I hope it helps

    • 0