CSS ：使用伪元素实现缺角矩形

最新推荐文章于 2024-05-29 17:24:34 发布

Sᴀғᴇᴛʏ 007

最新推荐文章于 2024-05-29 17:24:34 发布

阅读量276

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_44437620/article/details/130370416

版权

效果展示

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>使用伪元素实现缺角矩形</title>
	</head>
	<style>
		.cfx {
		  width: 200px;
		  height: 0;
		  position: relative;
		  border: 50px solid #f00;
		  border-right: 50px solid transparent;
		}
		.text {
		  position: absolute;
		  top: -18px;
		  font-size: 32px;
		  color: #185dff;
		}
	</style>
	<body>
		<div class="cfx">
			<div class="text">666666</div>
		</div>

	</body>
</html>