如何在图片上方放置CSS箭头

Question

我需要将小的css箭头放在图片右上角，就像这样

这是我的css代码，但我不知道怎么组合起来。

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

thx for help

- Michal Loksik

Answer 1

首先按照以下方式将图像和箭头包装在一个 <div> 元素中：

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

然后使用绝对定位将箭头放置在包装 div 的右上角： 示例在此处

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

- Hashem Qolami

Answer 2

可以使用伪类 演示

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

- Alex Wilson

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

- Richa