<template>
<div class="margin-2">
</div>
</template>
<style>
.margin-2 {
margin-bottom: 30px;
border: 1px solid rgba(45, 106, 230, 100);
padding: 10px;
position: relative;
}
.margin-2::before {
content: "";
width:0;
height: 0;
border:60px solid transparent;
border-right:60px solid #2D6AE6;
transform: rotate(135deg);
position: absolute;
right: -61px;
top: -61px;
cursor: pointer;
}
.margin-2::after {
content: "设置";
width: 40px;
height: 30px;
color: #FFF;
transform: rotate(45deg);
position: absolute;
right: 13px;
top: 16px;
font-weight: bold;
letter-spacing:2px;
cursor: pointer;
}
</style>
CSS在矩形右上角画三角形符号
Guess you like
Origin blog.csdn.net/ka_xingl/article/details/117251528
Ranking