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

可以使用CSS的伪类来实现这个效果，以下是一个简单的示例代码：

HTML代码：

<div class="card">
  <div class="content">
    <p>这是一个方形卡片</p>
  </div>
  <div class="corner top-right"></div>
  <div class="corner bottom-right"></div>
</div>

CSS代码：

.card {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.content {
  padding: 20px;
}

.corner {
  position: absolute;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
}

.top-right {
  top: -10px;
  right: -10px;
  background-image: url('path/to/top-right-corner.png');
}

.bottom-right {
  bottom: -10px;
  right: -10px;
  background-image: url('path/to/bottom-right-corner.png');
}

解释：

首先，我们创建了一个 `div` 元素，设置了它的 `width`、`height`、`background-color`、`border` 和 `box-shadow` 属性，来定义一个方形卡片的外观。

然后，在卡片内部创建了一个 `.content` 元素，用于放置卡片内容。

接下来，我们使用 `position: absolute` 属性将两个 `.corner` 元素定位到卡片的右上角和右下角。我们还使用 `background-image` 属性为这两个角标图片设置了背景图像，并设置了 `background-repeat` 和 `background-size` 属性来控制图片的显示方式。

最后，我们使用 `top` 和 `right` 或 `bottom` 和 `right` 属性来确定 `.corner` 元素的位置，使它们分别位于卡片的右上角和右下角，并留出一定的间距。