css绘制小图标集锦

最新推荐文章于 2021-07-27 16:06:59 发布

Albert_Tiger

最新推荐文章于 2021-07-27 16:06:59 发布

阅读量542

点赞数

分类专栏： css技巧

本文链接：https://blog.csdn.net/qq_35425276/article/details/79375886

版权

css技巧专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .heart {
            position: relative;
            width: 300px;
            height: 300px;
            transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            background: red;
        }
        .heart:before, .heart:after {
            position: absolute;
            display: block;
            content: '';
            width: 300px;
            height: 300px;
            border-radius: 100%;
            background: red;
        }
        .heart:before {
            left: -50%;
            top: 0;
        }
        .heart:after {
            right: 0;
            top: -50%;
        }
        .ex-search {
            position: relative;
        }
        .ex-search:before {
            content: ' ';
            position: absolute;
            width: 30px;
            height: 30px;
            border: 1px solid #666;
            border-radius: 30px;
            box-shadow: inset 1px 1px 10px rgba(0,0,0,.3);
        }
        .ex-search::after {
            content: ' ';
            position: absolute;
            width: 18px;
            height: 5px;
            background: #666;
            border-radius: 5px 0 0 5px;
            -webkit-transform: rotate(225deg);
            -moz-transform: rotate(225deg);
            -ms-transform: rotate(225deg);
            -o-transform: rotate(225deg);
            transform: rotate(225deg);
        }
        .ex-search:before {
            top: 0;
            left: 0;
        }
        .ex-search:after {
            right: -42px;
            bottom: -36px;
        }
    </style>
</head>
<body>
<div style="margin: 100px auto;width: 80%">
    <div class="heart"></div>
</div>
<div style="margin: 100px auto;width: 80%">
    <span class="ex-search"></span>
</div>
</body>
</html>