按钮样式如下图：
样式直接贴上去：
.box {
width: 120px;
height: 35px;
position: relative;
background: white;
overflow: hidden;
border: 1px solid #cccccc;
border-radius: 5px;
float: left;
margin-left: 10px;
cursor: pointer;
}
.box .box-con {
width: 40px;
height: 50px;
position: absolute;
background: rgb(93, 229, 253);
top: -30px;
right: -30px;
transform: rotate(45deg);
}
.box .box-con span {
position: absolute;
bottom: 0;
display: block;
width: 60px;
text-align: center;
transform: rotate(-45deg);
}
.box2{
border-radius:5px;
float:left;
margin-left:10px;
border: 1px solid #cccccc;
width:120px;
height:35px;
background: #ebebec;
cursor:pointer;
}
页面按钮：
<template>
<div class="box" style="border-radius:5px;float:left;margin-left:10px;" @click="changeAward()">
<div style="text-align: center;margin-top: 5px;"><span style="color:#cd7f32">按钮</span></div>
<div class="box-con">
<span style="color: blue;margin-left: -34%;">✓</span>
</div>
</div>
</template>
上面代码的✓可以换成其他符号。
样式.box2是没有倒三角，有时候需要切换，点击才显示倒三角选中样式。
可以在点击事件changeAward方法中赋js样式：
