css3 2种画图标识效果

最新推荐文章于 2024-08-26 22:59:06 发布

说学逗唱攻城狮

最新推荐文章于 2024-08-26 22:59:06 发布

阅读量140

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_34720531/article/details/121515951

版权

html javascript html5

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<style>
			/* 标识 1 */
			.tips-block-group {
				position: relative;
				margin: 20px;
				border: 1px solid #eee;
			}
			.tips-block {
				position: relative;
				left: -6px;
				top: 6px;
				width: 60px;
				height: 30px;
				line-height: 30px;
				font-size: 14px;
				background: #00AAFF;
				color: #fff;
				text-align: center;
				z-index: 2;
			}
			.tips-block::before {
				content: "";
				position: absolute;
				left: 0;
				top: 100%;
				z-index: -1;
				border-left: 3px solid transparent;
				border-bottom: 3px solid transparent;
			}
			.tips-block::before {
				border-right: 3px solid #0089c9;
				border-top: 3px solid #0089c9;
			}
			.tips-block-group p {
				margin-left: 30px;
			}
		</style>
	</head>
	<body>
		<div class="tips-block-group">
			<div class="tips-block">
				标识 1
			</div>
			<p>这是一个页面内容</p>
		</div>

	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<style>
			/* 标识 2 */
			.tips-group {
				position: relative;
				margin: 20px;
				display: flex;
				flex: 1 1 auto;
				z-index: 2;
				border: 1px solid #eee;
			}
			.tips {
				position: absolute;
				width: 60px;
				height: 60px;
				text-align: center;
				left: -5px;
				top: -5px;
				overflow: hidden;
			}
			.tips span {
				position: absolute;
				display: block;
				transform: rotate(-45deg);
				background-color: #00AAFF;
				width: 70px;
				top: 8px;
				left: -20px;
				font-size: 12px;
				color: #fff;
				padding: 2px 0;
				z-index: 1;
			}
			.tips span::before {
				content: "";
				position: absolute;
				left: 4px;
				top: 100%;
				z-index: -1;
				border-right: 3px solid transparent;
				border-bottom: 3px solid transparent;
			}
			.tips1 span::before {
				border-left: 3px solid #0089c9;
				border-top: 3px solid #0089c9;
			}
			
			.tips span::after {
				content: "";
				position: absolute;
				right: 0;
				top: 100%;
				z-index: -1;
				border-left: 3px solid transparent;
				border-bottom: 3px solid transparent;
			}
			.tips1 span::after {
				border-right: 3px solid #0089c9;
				border-top: 3px solid #0089c9;
			}
			
			.tips-group p {
				margin-left: 30px;
			}
			
		</style>
	</head>
	<body>
		<div class="tips-group">
			<div class="tips tips1">
				<span>提示 2</span>
			</div>
			<p>这是一个页面内容</p>
		</div>
		
	</body>
</html>

说学逗唱攻城狮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 2种画图标识效果

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> /* 标识 1 */ .tips-block-group { position: relative; margin: 20px; border: 1px solid #eee; } .tips-blo.
复制链接

扫一扫

专栏目录