SOURCE

<div class="box">
    <div class="cover">
        <div class="cover-wrap">这是图片区</div>
        <div class="cover-text">游艇会尊享内舱房-YIN</div>
    </div>
    <div class="wrap">
• 该舱房房型阳台会有不同程度视线受阻
• 最大入住人数：4
• 双人房入住为一张双人床或可转换成两张单人床；
  家庭房第三/四人入住为上下铺
• 带淋浴或浴缸的浴室
• 互动电视，迷你酒吧和吹风机
• 空调、电话和保险箱
• 宽敞的衣柜
• WiFi连接(付费)
• 房间面积：17平米阳台面积：4平米
• 楼层：8,14
    </div>
</div>

body{background: #ccc}


.box {
    position: relative;
    width:345px;
    height: 540px;
    border-radius: 24px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}

.cover{
    position: relative;
    width: 100%;
    height: 0;
    box-sizing: content-box;
    padding-top: 62%;
    
}
.cover-wrap{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top:0;
    background: red;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;  
}

.cover-text{
    position: absolute;
    width: 96%;
    height: 60px;
    left: 2%;
    top:70%;
    background: rgba(255,255,255,.95);
    border: 1px solid #fff;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center; 
    padding-bottom: 10px;
    box-sizing: border-box;
}

.wrap{
    position: absolute;
    box-sizing: border-box;
    width:100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 24px;
    background:radial-gradient(circle at 50% -73%, transparent 64%, #fff 64.1%) no-repeat left / 100% 100%, radial-gradient(circle at 50% -100%, transparent 68%, #FDDC9F 68.1%) no-repeat left / 100% 100%;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 65%;
}