How to place css arrow on top of image

Question

i need place small css arrow in top right corner of img, like this

Here is my css code for arrow, but I dont know how to put it together.

.cssarrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 20px 0;
    border-color: transparent blue transparent transparent;
}

thx for help

Answer 1

First wrap the image and the arrow by a <div> element as follows:

<div class="wrapper">
    <img src="http://lorempixel.com/250/200" alt="">
    <div class="cssarrow"></div>
</div>

Then use absolute positioning to place the arrow on top-right corner of the wrapper div:

EXAMPLE HERE

.wrapper {
  position: relative;    /* Establish a containing block for the absolute element */
  display: inline-block; /* To make width fit to the content */
}

.wrapper img {
  vertical-align: middle; /* Fix the gap under the inline level element */
}

.cssarrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent gold transparent transparent;

  position: absolute; /* Remove the element from normal flow */
  top: 0; right: 0;   /* Position the element at top-right corner of the wrapper */
}

Answer 2

possible to use pseudo-class DEMO

<div class="wrap">
  <img src="http://placehold.it/350x150" alt="">
</div>

.wrap {
  position: relative;
  display: inline-block;
}

.wrap:after {
  position: absolute;
  top: 0; right: 0;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 30px 30px 0;
  border-color: transparent blue transparent transparent;
}