要创建一个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中，您可以使用以下代码来创建包含斜
角标的元素：
```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 ]
830
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
