How can I create a CSS arrow, which scales to the size of the containing div?

Tags: css,css3

Problem :

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.

Solution :

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);


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

    CSS Howto..

    How to avoid CSS interference in an HTML page

    How do I add CSS (transition) to an item from a SVG file? [duplicate]

    How to create a nested vertical menu with horizontally sub-menus using css

    Flexbox: How do I create my thumbnails to span 100% of the container width?

    How to finish my modal ajax code to work correctly?

    How to make Wrapper div contain only non-overflowing divs

    How can I convert AI to HTML & CSS to use in ASP.Net Application

    How to set MenuItem to corrent width in

    Flexslider - How to make two slider functioning together (images and a paragraph text) using a single directionNav?

    How to apply format depending on absence of a CSS class?

    How to set two divs side-by-side with the same height?

    How to change a css element based on other element

    How to select multiple CSS parent and descendant groups efficiently

    How to change cursor on the NextGen Gallery Slideshow in Wordpress

    How to add background image to only one page in Jade

      navigation - how to vertical align contents of

    How to remove CSS triangles?

    How can I center these varied number of elements within a div?

    How to create slanted tabs with a border in CSS? [duplicate]

    How to make horizontal lines with words in the middle using CSS?

    Text overlay over image on hover. How to stop other divs from moving

    How to prevent CSS inheritance where child selectors fail?

    How to edit .css file from html via jquery

    Css When having 2 bg-image, how to have 1 to extend out of the grid

    How can I make Non-English quotation marks with a help of CSS? [closed]

    How do I control the spacing between my child links in my CSS driven menu dropdown?

    How to dynamically create a css style rule that is overridable by earlier rules

    How to make content next to a fixed-position menu not overlap in smaller resolutions

    how to align element to bottom of page in print preview

    Hover on “everything but” aka “spotlight” effect: how to make smooth & easy hover transitions?