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

最新推荐文章于 2025-05-09 11:47:55 发布

粉末的沉淀

最新推荐文章于 2025-05-09 11:47:55 发布

阅读量1.2k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css javascript html

本文链接：https://blog.csdn.net/lilycheng1986/article/details/124612298

css 专栏收录该内容

13 篇文章

订阅专栏

本文展示了如何使用CSS3创建一个右上角带有三角形且具有圆角的卡片组件。代码示例详细说明了实现这一效果的样式设置，包括边框技巧和定位属性的使用。示例中还包含了一个‘默认’标签，该标签以45度角倾斜显示在卡片的右上角。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>

效果图：