一个简单的小封面 纯html+css完成

上图 请看

下面是html部分

一个大div标签包裹一个小div标签，小div里面包裹三个span标签 最后在加一个h3标签

<div class="log">
        <div class="netflix">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <h3>nexe</h3>
    </div>

css 部分

body{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #000;
    
}
.netflix{
    position: relative;
    width: 360px;
    height: 520px;
    overflow: hidden;
    transform: scale(0.8);

}
.netflix::before {
    content: '';
    position: absolute;
    left: 0;
    bottom:-100px;
    width: 100%;
    height: 120px;
    background: #000;
    z-index: 2;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    transform: scaleX(1.5);
}
.netflix:active {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.netflix span{
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
    background: #fff;
}
.netflix span:nth-child(1){
    background: #b00612;
    left: 0;
}
.netflix span:nth-child(2){
    background: #e50815;
    left: 0;
    z-index: 1;
    transform-origin: top left;
    transform: skewX(24.8deg);
    box-shadow: 0 0 40px rgba(0,0,0,1)
}
.netflix span:nth-child(3){
    background: #b00612;
    right: 0;

}
h3 {
    position: relative;
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: Arial;
    color: #fff;
    font-size: 60px;
    text-transform: uppercase;
    letter-spacing: 15px;
}

用定位来实现三个span标签的位置 然后在加个圆角 阴影等 大家可以尝试一下