<template><!-- 右上角带三角形的card --><div style="width: 800px;margin: 20px auto;"><a-card class="card"><p>Card content</p><p>Card content</p><p>Card content</p><div class="divRadius"></div><div class="tagText">默认</div></a-card></div></template><script>export default {name: "hello",props: {dataSource: {}},components: {},data() {return {}},created() {},mounted() {},methods: {}}</script><style scoped>.card {position: relative;border-radius: 20px;}/* border、border-left、border-bottom宽度一样。*/.divRadius {border: 30px solid #55aaff;border-left: 30px solid transparent; border-bottom: 30px solid transparent; /*跟card的border-radius设置的值一致*/border-top-right-radius: 20px;position: absolute;width: 0; right: -1px;top:-1px;cursor: pointer;}.tagText {position: absolute; right: 6px;top:6px;transform:rotate(45deg);font-weight: bold;color: white;}</style>
效果图：
参考：
怎么用css3写出一角是圆角的三角形_百度知道
