鍍金池/ 問答/Java  PHP  C  HTML/ 如何用css實(shí)現(xiàn)折疊效果，如下圖代碼

如何用css實(shí)現(xiàn)折疊效果，如下圖代碼

想要的效果

clipboard.png

clipboard.png

我做的效果

clipboard.png

代碼

<!DOCTYPE html>
<html>
<head lang="en">
    <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>
回答
編輯回答
小眼睛
        .box::after{
            position: absolute;
            bottom:-10px;
            left:0;
            content: '';
            width: 0;
            height: 0;
            border-top: 10px solid red;
            border-left: 10px solid transparent;
        }

加個偽類就好

2018年3月11日 10:12