Clever Geek Handbook

How to place arrow css over image

I need to place a small css arrow in the upper right corner of the img, like enter image description here

Here is my arrow css code, but I don't 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;
}

thanks for the reference

+3


source to share


3 answers


First, wrap the image and arrow with an element <div>

like this:

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

Then use absolute positioning to position the arrow at the 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 */
}
+4


source


the pseudo class DEMO can be used



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


source


Try the following. Check the fiddle for example with your image

FIDDLE DEMO

Html

<div>
    <img src='http://i.stack.imgur.com/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%
}
0


source






More articles:


All Articles