CSS书签制作

最新推荐文章于 2022-07-21 16:50:35 发布

ayangjing

最新推荐文章于 2022-07-21 16:50:35 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ayangjing/article/details/42743985

本文介绍了如何使用CSS技术创建类似于新浪书签的效果。通过源码展示，详细解析了CSS在书签样式设计中的应用。

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

类似新浪书签，如下图所示：

源码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css书签制作</title>
<style type="text/css">
	body{
		font: 12px/1.5 'Microsoft YaHei';
	}
	div,a{
		margin: 0;
		padding: 0;
	}
	a{
		text-decoration: none;
		font-size: 12px;
		color: #333;
	}
	.topic-mark{
		position: relative;
		margin-left: 15px;
		min-width: 24px;
		font-weight: normal;
		font-size: 12px;
		color: #333;
		border:1px solid #d9d9d9;
		display: inline-block;
		height: 20px;
		line-height: 20px;
		padding: 0 10px 0 5px;
	}
	.topic-mark span{
		position: absolute;
		top: 0;
		left: -21px;
	}

	.topic-mark span i, .topic-mark span em{
		border-width: 10px;
		display: inline-block;
		width: 0;
		height: 0;
		border-style: solid;
		overflow: hidden;
		font-size: 0;
		line-height: 0;
		vertical-align: top;
		border-top-color: transparent;
		border-bottom-color: transparent;
		border-left-color: transparent;
	}
	.arrow_1{
		border-color: #cccccc;
	}
	.arrow_2 {
		color: #fff;
		border-color: #fff;
	}
	.topic-mark em {
		margin: 0 0 0 -19px;
	}



</style>
</head>
<body>
	<div>
		<a href="" class="topic-mark">
			<span ><i class="arrow_1"></i><em class="arrow_2"></em></span>
			社会
		</a>
	</div>
</body>
</html>

主要是两个左三角重叠，一个边框有颜色，一个边框为白色。