Estoy tratando de replicar esta imagen donde una etiqueta h1 está dentro de una etiqueta div con un fondo verde y un triángulo verde oscuro en el extremo derecho. ¿Es posible hacer lo?

enter image description here

h1 {
  font-size: 40px;
  line-height: 50px;
  font-weight: bold;
  letter-spacing: 0.2px;
  background: #8CCA97;
  color: #FFFFFF;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 6px 18px 6px 30px;
  text-align: left;
}
<h1> Weekly Requirements</h1>
3
Shubham Kumar 7 sep. 2018 a las 20:50

3 respuestas

La mejor respuesta

Puede usar pseudo-element como before y after para crear esta forma así:

.h1 {
 font-size: 40px;
 line-height: 50px;
 font-weight: bold;
 letter-spacing: 0.2px;
 background: #8CCA97;
 color: #FFFFFF;
 margin-top: 0px;
 margin-bottom: 0px;
 padding: 6px 18px 6px 30px;
  position: relative;
 text-align: left;
 }

.h1:after {
  content: '';
  border-top: 31px solid transparent;
  border-left: 45px solid transparent;
  border-bottom: 31px solid green;
  border-right: 45px solid green;
  position: absolute;
  right: 0;
  top: 0;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="row">
     <div class="col-sm-12">
          <h1 class="h1"> Weekly Requirements</h1>
      </div>
</div>
</body>
</html>

Dependiendo de la situación, básicamente cómo manejas responsive, debes tener cuidado con el renderizado de esta forma.

3
Laura 7 sep. 2018 a las 17:59

No necesita ningún pseudo elemento o código complejo, un fondo simple con degradado puede hacerlo fácilmente y responderá:

h1 {
 background:
  linear-gradient(to top left,darkgreen 49%,transparent 50%) right/100px 100% no-repeat,
  lightgreen;
}

/*Extra styles*/
h1 {
  font-size: 40px;
  line-height: 50px;
  font-weight: bold;
  letter-spacing: 0.2px;
  color: #FFFFFF;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 6px 18px 6px 30px;
}
<h1> Weekly Requirements</h1>
2
Temani Afif 7 sep. 2018 a las 20:18

No puede crear directamente un triángulo div con CSS, sin embargo, puede lograrlo con algunos trucos.

.arrow-shape {
  width: 0; 
  height: 0; 
  border-left: 80px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 50px solid green;
  position: absolute;
  top: 0;
  right: 0;
}

Aquí hay un jsfiddle que funciona: https://jsfiddle.net/anc8s532/

2
treecon 7 sep. 2018 a las 18:09