如何在图像上放置CSS箭头

Question

我需要在img的右上角放置一个小的css箭头，就像这个

一样

这是我的箭头css代码，但我不知道如何把它放在一起。

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

请求帮助

Answer 1

首先用<div>元素包装图像和箭头，如下所示：

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

然后使用绝对定位将箭头放在包装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

可以使用伪类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;
}

Answer 3

尝试以下方法。例如，使用您的图片

检查小提琴

<强> 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%
}