如何使 div 右上角

如果我们希望一个 div 右上角有一个小角标，该怎么做呢？下面一步步介绍两种实现方法。

方法一：使用 CSS 伪元素实现

第一种方法是使用 CSS 伪元素 ::before 或 ::after，并设置它们的 content 为一个空字符。由于伪元素默认是 inline 类型，我们还需要将它们的 display 属性设置为 block，才能方便地进行定位。

具体步骤如下：

1. 给 div 设置 position: relative，这样就可以将伪元素定位相对于这个 div。

2. 使用 ::after 创建一个伪元素。

3. 将伪元素的 content 设置为空字符，将其 display 属性设置为 block。

4. 设置伪元素的 width、height、border-width 等样式，模拟一个三角形，并将其 position 设置为 absolute。

5. 将伪元素的 top 和 right 根据需要进行微调。

示例代码如下：

div {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #f2f2f2;
}

div::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 0 20px;
  border-color: transparent transparent transparent #f2f2f2;
  position: absolute;
  top: 0;
  right: 0;
}

方法二：使用 SVG 实现

第二种方法是使用 SVG 来创建一个三角形，然后将它插入到 div 中。具体步骤如下：

1. 在 SVG 中定义一个三角形路径。

2. 将 SVG 插入到 div 中，并设置它的 position 为 absolute，top 和 right 根据需要进行微调。

示例代码如下：

div {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #f2f2f2;
}

div svg {
  position: absolute;
  top: 0;
  right: 0;
}

<div>
  <svg width="20" height="20" viewBox="0 0 20 20" fill="#f2f2f2">
    <path d="M0 0 L20 0 L0 20 Z"></path>
  </svg>
</div>

以上就是两种实现方式的详细介绍。可以根据具体需求选择合适的方法来实现。