如何用css实现折叠效果,如下图代码

想要的效果

https://img3.mukewang.com/5c820d1400018a2007580422.jpg

https://img1.mukewang.com/5c820d150001ce0308000393.jpg

我做的效果

https://img1.mukewang.com/5c820d170001937403530194.jpg

代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        .box{

            display: flex;

            align-items: center;

            position: relative;

            width: 115px;

            height: 40px;

            margin: 100px auto;

            line-height: 40px;

            background: #fa610e;

            color: #fff;

            border-radius: 0 20px 20px 0;

        }

        .box span{

            width: 9px;

            height: 9px;

            margin: 0 10px 0 20px;

            background-color: #fff;

            border-radius: 50%;

        }

    </style>

</head>

<body>

<div class="box">

    <span></span>

    分析

</div>

</body>

</html>


慕丝7291255
浏览 367回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript