CODEWITHSUNDEEP
htmlcss
Michal Loksik
Michal Loksik

Reputation: 1799

How to place css arrow on top of image

i need place small css arrow in top right corner of img, like this enter image description here

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

Upvotes: 3

Views: 6062

Answers (3)

Alex Wilson
Alex Wilson

Reputation: 2419

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

Upvotes: 2

Richa
Richa

Reputation: 3289

Try the following. Check fiddle for example with your image

FIDDLE DEMO

HTML

<div>
    <img src='https://i.sstatic.net/YtYMk.jpg' />
    <div class='cssarrow'></div>
</div>

CSS

.main {
    width:100%
}
.cssarrow {
    border-style: solid;
    border-width: 0 20px 20px 0;
    border-color: transparent blue transparent transparent;
    z-index:100;
    position:absolute;
    right:0;
}
img {
    position:absolute;
    width:100%
}

Upvotes: 0

Hashem Qolami
Hashem Qolami

Reputation: 99474

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 */
}

Upvotes: 4

Related Questions