css：绘制一角是圆角的三角形

<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写出一角是圆角的三角形_百度知道