为图像添加彩色边角

Question

我需要为图像添加彩色边角（左上角为红色，右上角为蓝色）。角落的大小约为5像素。

是否可以仅使用样式进行操作？也许着色或添加叠加图像？它必须是这样的元素：

<img src="xxx.jpg" class="img_corners"></img>

CSS：

.img_corners
{
   /*styling for corners*/
}

Answer 1

你需要将图像包装在div中，因为img

不支持伪元素

img {
  width: 100%;
}
div {
  width: 100px;
  height: 100px;
  display: inline-block;
  position: relative;
}
div:before,
div:after {
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  z-index: -1;
  border-style: solid;
}
div:before {
  border-width: 5px 0 0 5px;
  border-color: red;
  top: -4px;
  left: -4px;
}
div:after {
  border-width: 5px 5px 0 0;
  border-color: blue;
  top: -4px;
  right: -4px;
}

<div>
  <img src="http://placeimg.com/100/100/any" />
</div>

修改

img {
  width: 100%;
}
div {
  width: 100px;
  height: 100px;
  display: inline-block;
  position: relative;
}
div:before,
div:after {
  content: '';
  width: 0px;
  height: 0px;
  position: absolute;
  border-style: solid;
}
div:before {
  border-width: 20px;
  border-width: 20px;
  border-color: red transparent transparent red;
  top: 0px;
  left: 0px;
}
div:after {
  border-width: 20px;
  border-width: 20px;
  border-color: blue blue transparent transparent;
  top: 0px;
  right: 0px;
}

<div>
  <img src="http://placeimg.com/100/100/any" />
</div>