前端右上角已报名三角形实现

最新推荐文章于 2024-06-28 17:10:15 发布

Guo_Elleny

最新推荐文章于 2024-06-28 17:10:15 发布

阅读量321

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Guo_Elleny/article/details/119750868

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用HTML和CSS实现右上角带有'已报名'文字的三角形标记。主要通过两个三角形（一个绿色，一个灰色）的重叠以及文字的旋转和定位来达成这一视觉效果。代码示例中，`big`类设置了背景，`st`类用于定位，`green`类和`trigger`类分别创建了三角形，而`span`元素则包含'已报名'文字并进行旋转处理。

摘要由CSDN通过智能技术生成

实现的效果图
请添加图片描述
实现原理
1.两个三角形来实现右上角的样式
2.已报名文字通过旋转和定位来实现

<html>
	<head>
		<meta charset="utf-8">
		<title>已报名三角形</title>
		<link rel="stylesheet" href="./5.css">
	</head>
	<body>
		<div class="big">
			<div class="st">
				<div class="green">
					<span>已报名</span>
					<div class="trigger">
					</div>
				</div>

			</div>
		</div>
	</body>
</html>

body {
	background-color: #333333;
}

.big {
	position: relative;
	width: 400px;
	height: 200px;
	background-color: #eee;
	background-size: 50% 50%;
	background-repeat: no-repeat;
	margin: 100px auto;

}

.st {
	position: absolute;
	left: 300px;
}

.green {
	position: relative;
	color: #eee;
	width: 0;
	height: 0;
	border-top: 100px solid green;
	border-left: 100px solid transparent;
}

.green>span {
	position: absolute;
	top: -75px;
	left: -60px;
	transform: rotate(45deg);
}

.trigger {
	position: absolute;
	width: 0;
	height: 0;
	left: -50px;
	top: -100px;
	border-top: 50px solid #eee;
	border-left: 50px solid transparent;

}

Guo_Elleny

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端右上角已报名三角形实现

实现的效果图实现原理1.两个三角形来实现右上角的样式2.已报名文字通过旋转和定位来实现<html> <head> <meta charset="utf-8"> <title>已报名三角形</title> <link rel="stylesheet" href="./5.css"> </head> <body> <div class="big"> <div c
复制链接

扫一扫

专栏目录