【CSS3】CSS画搜索图和分享图
效果图：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>CSS3的乐趣</title>
<style>
body{
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.sanjiao{
margin-top: -149px;
margin-left: -10px;
transform: rotate(90deg);
width: 0px;
height: 0px;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
border-bottom: 20px solid black;
}
.yuan{
width: 20px;
height: 20px;
border: 2px solid black;
border-radius: 50%;
}
.gan{
width: 30px;
height: 7px;
background-color: black;
border-radius: 5px;
transform: rotate(30deg);
margin-top: 30px;
margin-left: -5px;
}
.border{
height: 10em;
border-top: 1.1em solid black;
border-top-left-radius: 2.5em 2em;
width: 40px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="yuan"></div>
<div class="gan"></div>
<div class="border"></div>
<div class="sanjiao"></div>
</body>
</html>