Question

I have a div which needs to display an arrow from one of 4 directions (top, left, right, bottom) during a merge event. The div can be any size and the arrow should scale to about 30% of the div size.

I am not sure how to make the arrow in this jsfiddle scale to the size of the .box div without using JavaScript to set the size of the border-width triangle (hover over the box to see what I mean). Maybe you guys know a better way to draw the arrow.

Answer 1

this is hiding the problem in fact, but may be sometime can be usefull:
(i used zoom to change size of the container)

.box {
  position: relative;
  margin: 20px;  
  width: 20em;
  height: 20em;
  border: 1px solid rgb(77, 77, 77);
  box-shadow: 0px 0px 4px 0px rgb(189, 189, 189),
    0px 0px 0px 0px black inset;
}

.box:hover {
  width: 10em;
  margin: 10px;
  zoom: 200%;
}

.box:before {
  content: '';
  position: relative;
  width: 30%;
  left: 0; right: 80%; 
  height: 40px; 
  top: 45%;
  background: rgba(0,0,0,0.1);
  display: inline-block;
}

.box:after {
  content: '';
  position: absolute;
  left: 30%; top: 45%;
  margin-top: -20px;
  border-style: solid;
  border-width: 40px;
  border-color: transparent transparent transparent rgba(0,0,0,0.1);
}

demo

also here is arrow with svg data, but this can’t be used when you expect to change the aspect ratio of arrow.

as border-width can’t be percentage there is no real way to get the goal