css实现一些小图标

最新推荐文章于 2021-10-03 13:35:16 发布

南有樛木。

最新推荐文章于 2021-10-03 13:35:16 发布

阅读量5.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML+CSS 文章标签： css border

本文链接：https://blog.youkuaiyun.com/qq_35310623/article/details/89182668

HTML+CSS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用CSS技术来创建特定的图标，包括搜索图标和house图标，通过border技巧实现图标的视觉效果。

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

实现效果图如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>css conf</title>
	<style type="text/css">
		.icon{
			position:relative;
		}
		.icon1{
			width:0;
			height:0;
			border:30px solid rgba(255,255,255,0);
			border-left-color: #b5b1b1;
			position:absolute;
			top:26px;
			left:116px;
		}
		.icon2{
			width:60px;
			height:60px;
			border-top:20px solid #b5b1b1;
			border-top-left-radius: 70px;/*给左上角添加圆角边框*/
			position:absolute;
			top:46px;
			left:56px;
		}
		.icon3{
			width:20px;
			height:80px;
			border-top:20px solid #b5b1b1;
			border-right:20px solid rgba(255,255,255,0);
			border-left:20px solid #b5b1b1;
			position:absolute;
			top:40px;
		}
		.icon4{
			width:100px;
			height:20px;
			border-top:20px solid rgba(255,255,255,0);
			border-right:20px solid #b5b1b1;
			border-bottom:20px solid #b5b1b1;
			/*border-left:20px solid #b5b1b1;*/
			position:absolute;
			top:100px;
		}
	</style>
</head>
<body>
<div class="icon">
		<div class="icon1"></div>
		<div class="icon2"></div>
		<div class="icon3"></div>
		<div class="icon4"></div>
	</div>
</body>
</html>

第二个，搜索的小图标

/*css部分*/
.search{
			position: relative;
		}
		.dots{
			width:100px;
			height:100px;
			border:12px solid #000;
			border-radius: 50%;
		}
		.shank{
			width:180px;
			height:8px;
			background:#000;
			border:6px solid #000;
			border-radius: 8px;
			transform:rotate(45deg);
			position:absolute;
			top:166px;
			left:78px;
		}
/*html部分*/
<div class="search">
		<div class="dots"></div>
		<div class="shank"></div>
	</div>

第三个house图标

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>css conf</title>
	<style type="text/css">
		/*house*/
		.house{
			position:relative;
		}
		.trangle{
			width:0;
			height:0;
			border:250px solid rgba(255,255,255,0);
			border-bottom-color: #000;
		}
		.square{
			width:150px;
			height:130px;
			border:100px solid #000;
			border-bottom:none;
			position:absolute;
			left:76px;
		}
	</style>
</head>
<body>
<!-- house -->
	<div class="house">
		<div class="trangle"></div>
		<div class="square"></div>
	</div>
</body>
</html>