Skip to main content
se añadieron 76 caracteres en el cuerpo
Origen Enlace
Erica T.
  • 410
  • 2
  • 7

Esta es una forma de hacerlo, agregando un contenedor para darle la forma triangular, y rotando el texto:

.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>

Esta es una forma de hacerlo:

.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>

Esta es una forma de hacerlo, agregando un contenedor para darle la forma triangular, y rotando el texto:

.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>

Origen Enlace
Erica T.
  • 410
  • 2
  • 7

Esta es una forma de hacerlo:

.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>