通过CSS样式，在element-plus的card组件的右上角画一个与右上角重合的直角三角形

你可以通过以下CSS样式来实现：

.el-card__header {
  position: relative;
}

.el-card__header::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-left: 20px solid #409EFF;
}

这里，我们首先将 `.el-card__header` 容器设置为相对定位的，以便后续对伪元素进行绝对定位。

然后，我们使用 `::after` 伪元素来创建一个右上角的直角三角形。我们将其设置为绝对定位，并通过 `top` 和 `right` 属性将其定位到 `.el-card__header` 容器的右上角。

接下来，我们使用 `border` 属性来定义直角三角形的形状和颜色。这里，我们将左侧边框设为透明，右上角边框设为蓝色，并将宽度和高度设置为 `20px`。

相关问题

给div加class属性，要求div样式为悬浮在element-plus的card组件的右上角的直角三角形

可以使用CSS的伪元素实现一个直角三角形，然后将该伪元素添加到div中，同时给div添加class属性，代码如下：

HTML代码：

<el-card class="card">
  <div class="triangle"></div>
</el-card>

CSS代码：

.card {
  position: relative;
}

.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-right: 20px solid #333;
  border-bottom: 20px solid #333;
  border-left: none;
  position: absolute;
  top: -20px;
  right: -20px;
}

解释一下：

首先，我们将card组件设置为相对定位，这是为了让内部的div可以使用绝对定位。

然后，我们使用CSS的伪元素（::before或::after）来创建一个直角三角形。具体来说，我们将div的宽度和高度都设置为0，然后使用border属性来创建三角形的边框。在这里，我们将上边框设为透明，右边框和下边框设为黑色，左边框不设置，这样就可以得到一个直角三角形。

接下来，我们将div设置为绝对定位，并将其定位到卡片组件的右上角。由于我们使用的是相对定位，所以div的位置是相对于卡片组件的位置进行定位的。

最后，我们将div添加一个名为“triangle”的class属性，这样就可以将CSS样式应用到该div上了。