實現效果圖如下：
<!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>