[分享]css一个图像套一个图形

CSS是网页设计中非常重要的一种技术，它可以调整网页中的各种元素，包括文本、图像等等。其中一个有趣的技巧就是在一个图像周围添加一个特殊的图形，这种效果可以让网页看起来更加精美和有趣。 img { fl...

CSS是网页设计中非常重要的一种技术，它可以调整网页中的各种元素，包括文本、图像等等。其中一个有趣的技巧就是在一个图像周围添加一个特殊的图形，这种效果可以让网页看起来更加精美和有趣。

 img {
  float: left;
  margin-right: 20px;
  border: 2px solid grey;
  padding: 5px;
}

img:after {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: url("https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original-wordmark.svg") no-repeat;
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 10;
  border-radius: 50%;
}

img:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid black;
  position: absolute;
  top: -10px;
  right: -12px;
  z-index: 9;
} 

如上述代码所示，我们可以用“:after”和“:before”选择器来为图像添加一个圆形的背景和一个三角形形状的轮廓。具体地，我们首先为图像添加一个边框和一些内边距，然后在图像的“:after”选择器中添加一个宽度和高度的属性来定义圆形的背景。这里我们使用了CSS3中的“border-radius”属性来让边缘变为圆形。同时，我们还在“:before”选择器中添加了一个三角形的形状。在这个案例中，我们使用了一个CSS icon图像，但您也可以使用SVG或其他图像格式。最后，您可以通过调整“top”和“right”属性来放置图形的位置。