css盒子模型制作一个如下图所示的播放器图标

Question

Answer 1

<div class="card">
        <div class="bg">
            <div class="video">
                <div class="play">
                    <span></span>
                </div>
            </div>
        </div>
    </div>

 .card {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 240px;
        height: 240px;
        background-image: linear-gradient(purple, #eee, #482631);
    }
    .bg {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 180px;
        height: 180px;
        background-image: linear-gradient(to bottom right, purple, #333);
        border-radius: 15px;
    }
    .video {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 120px;
        height: 70px;
        background-image: linear-gradient(to bottom right, gold, #999);
        border: 10px solid #000;
        border-radius: 15px;
        overflow: hidden;
    }
    .play {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #fff;
        overflow: hidden;
    }
    span {
        border: 10px solid #fff;
        margin: 10px 0 10px 15px;
        border-left-color: #000;
    }