css 写一个方形卡片 右上角和右下角有角标图片

你可以使用以下的 CSS 代码来实现一个带有角标图片的方形卡片：

.card {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  border-radius: 5px;
  overflow: hidden;
}

.card::before,
.card::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  background-image: url('right-top-corner.png');
  background-size: cover;
}

.card::before {
  top: 0;
  right: 0;
}

.card::after {
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}

在这个代码中，我们首先定义了一个 `.card` 类来表示我们的卡片。然后我们使用 `position: relative` 属性来让 `.card` 元素成为其子元素（即角标）的相对定位容器。

接下来，我们设置了 `.card` 元素的宽度、高度、背景颜色和圆角，以及设置 `overflow: hidden` 来隐藏超出边界的内容。

然后，我们使用 `::before` 和 `::after` 伪元素来创建两个角标。我们给这些元素设置了 `content: ''` 来让它们生成一个空的内容框，并使用 `position: absolute` 属性将它们定位在 `.card` 元素的右上角和右下角。

我们还为这些伪元素设置了 `background-image` 属性来指定角标图片的 URL，并使用 `background-size: cover` 来缩放图片以填充整个角标。

最后，我们使用 `top`、`right`、`bottom` 和 `transform` 属性来对角标进行微调，以使它们位于正确的位置并旋转其中一个以获得正确的方向。

你可以根据需要修改这些样式来满足你的具体需求。