Shape at the end of a colored DIV element

user_6912642 0
Viewed 47

I am trying to replicate this image where a h1 tag is inside a div tag with a green background and a dark green triangle at the far-right. Is it possible to do it?

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>

css html
3 Answers

You can use pseudo-element like before and after in order to create this shape like this:

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

Depending of the situation, basically how you handle responsive, you must be careful of the render of this shape.

user_95928440

You cannot directly create a triangle div with CSS, however, you can achieve it with some tricks.

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

Here is a working jsfiddle: https://jsfiddle.net/anc8s532/

user_75121140

No need any pseudo element or complex code, a simple background with gradient can do it easily and it will be responsive:

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>

user_86203330
Related