How can I create a responsive Arrow-Pointer shape in CSS?

Question

I'm trying to build an EU Energy Efficiency Rating widget, which looks sth like this:

However, I'm struggling to create the arrow shape in a way that would be responsive to changes in height/width, plus I need a black border all around each arrow.
This is what I've come up with until now for each arrow:

span {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: 700;
  font-size: 1em;
  color: white;
  padding: 2%;
  height: 70%;
  background: #3b7634;
  width: 10%;
}

span::before {
  top: 0;
  background: linear-gradient(to right top, red 50%, transparent 50%);
}

span::after {
  bottom: 0;
  background: linear-gradient(to right bottom, red 50%, transparent 50%);
}

which looks like this:

Note how the tip is too "pointy" and a little rough. This is indeed responsive, but it's not pretty, nor is it possible to apply a border around the whole body + tip, bc the tip is created using linear-gradient.

So, is there any better way of doing it?
I'm using Angular btw. Thanks in advance.

Answer 1

You may also use clip-path to cut that arrow off.

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

example

/* cut an arrow shape on the right side */

span {
  clip-path: polygon( 0% 0%, calc(100% - 0.4em) 0%, 100% 50%, calc(100% - 0.4em) 100%, 0% 100%);
}


/* give it a shadow or a border ? */

div {
  filter: drop-shadow(2px 2px 2px);
}


/* styling : size and colors */

span {
  font-size: clamp(1em, 5vmax, 40px);
  padding-right: 0.5em;
  color: white;
  float: left;
  clear: left;
  margin: 0.1em;
}

span:nth-child(1) {
  background: #018133;
  padding-left: 2em;
}

span:nth-child(2) {
  background: #27B432;
  padding-left: 2.8em;
}

span:nth-child(3) {
  background: #88E213;
  padding-left: 3.6em;
}

span:nth-child(4) {
  background: #F0EF00;
  padding-left: 4.2em;
}

span:nth-child(5) {
  background: #FC9000;
  padding-left: 5em;
}

span:nth-child(6) {
  background: #FD0000;
  padding-left: 5.8em;
}

span:nth-child(7) {
  background: #FD001D;
  padding-left: 6.45em;
}

<div>
  <span>A</span>
  <span>B</span>
  <span>C</span>
  <span>D</span>
  <span>E</span>
  <span>F</span>
  <span>G</span>
</div>

Codepen demo

Here is an online tool to help you create your first shapes (many examples ready to copy/paste) https://bennettfeely.com/clippy/

Answer 2

You would want to use a triangle rather than a linear-gradient. For example:

https://codepen.io/seanstopnik/pen/072a65f5fa4a4da25e46506f7c19fb3d

* {
  box-sizing: border-box;
}

.arrow {
  position: relative;
  width: 20%;
  height: 22px;
  color: #fff;
  text-align: right;
  background-color: red;
  padding: 2px 10px;
}

.arrow--right:before {
  position: absolute;
  width: 0;
  height: 0;
  content: "";
  border-width: 11px;
  border-style: solid;
  border-color: transparent;
  border-left-color: red;
  top: 0;
  right: -22px;
}

<div class="arrow arrow--right">A</div>