css 右上角斜着角标

要创建一个CSS右上角斜角标，您可以使用以下CSS样式：

.round-triangle {
  margin-left: 410px;
  width: 30px;
  height: 30px;
  position: absolute;
  background-color: #74B9E9;
  border-top-right-radius: 12px;
}

.round-triangle:before,
.round-triangle:after {
  content: "";
  width: 30px;
  height: 30px;
  background-color: #fff;
  position: absolute;
  margin-left: 20px;
}

.round-triangle:before {
  transform: rotate(-135deg) skewX(-45deg) scale(1.45, 0.7) translate(0, -50%);
}

.round-triangle:after {
  transform: rotate(135deg) skewY(-45deg) scale(0.7, 1.45) translate(50%, 0);
}

这些样式将创建一个背景颜色为#74B9E9的父元素，并将宽度和高度设置为30px。border-top-right-radius属性将右上角的边角设置为12px。然后通过:before和:after伪元素，使用transform属性进行旋转、倾斜、缩放和平移的操作，使伪元素形成斜角标的效果。伪元素的背景颜色设置为白色(#fff)。

在HTML中，您可以使用以下代码来创建包含斜角标的元素：

<div class="round-triangle"></div>

这将创建一个带有类名为"round-triangle"的div元素，该元素将应用CSS样式，从而生成右上角的斜角标。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [CSS实现纯右上角倾斜四十五度封页角以及小浮标效果](https://blog.csdn.net/qq826303461/article/details/104777029)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [css之右上角带弧形的三角形标签文字45度倾斜显示](https://blog.csdn.net/qq_43777572/article/details/127316668)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]