css实现一些小图标

最新推荐文章于 2021-11-16 16:06:38 发布

南有樛木。

最新推荐文章于 2021-11-16 16:06:38 发布

阅读量5.8k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_35310623/article/details/89182668

版权

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

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

实现效果图如下：

<!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;