为图像添加彩色角

Question

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

是否可以仅通过样式来实现？也许着色或添加叠加图像？它必须在这样的元素上：

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

为图像添加彩色角

Adding colored corners to image

html

css

image