按钮右上角倒三角样式

按钮样式如下图：

样式直接贴上去：

.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样式：

按钮右上角倒三角样式

原文：https://www.cnblogs.com/UsefulIdiot/p/14395006.html