如何使用 svg 進行 2 個背景顏色划分

Question

我正在嘗試為我的網站創建一張卡片。 我正在嘗試使用 svg with path 來制作曲線，但我不知道如何進行兩個背景分割，其中一個位於 svg 之上，帶有 x 顏色，另一個位於 svg 下方顏色

HTML

 .card__svg { position:relative; top:-100px; z-index:-10; }

 <div style="display:inline-block;box-shadow:0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);height:450px;width:300px;margin-left:15px;margin-top:50px;color:white;font-family:Fredoka One" id="hvr-float" class="box"> <div id="card_top" style="background-position: center;background-repeat: no-repeat;background-size: cover;"> <div class="ribbon ribbon-top-right"><span><a href="/premium"><i class="fas fa-crown"></i> Premium</a></span></div> <img style="border: 2px solid grey;border-radius:50%;width:150px;height:150px;position:relative;left:60px;top:60px;" src="" class="card-img-top"> <svg class="card__svg" viewBox="0 0 800 500"> <path class="card__line" d="M 0 100 Q 50 200 100 250 Q 250 400 350 300 C 400 250 550 150 650 300 Q 750 450 800 400" stroke="black" stroke-width="3" fill="transparent"/> </svg> </div> <div id="card-body" class="card-body"> <a style="color:#d4c078" href="/bots/" class="card-title"></a> <p class="card-text">test</p> <div class="card-footer"> </div> </div> </div>

我想要做的是一樣的東西那

Answer 1

像這樣的東西？

 #hvr-float { display:inline-block; box-shadow:0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); height:450px; width:300px; margin-left:15px; margin-top:50px; color:white; font-family:Fredoka One; position: relative; } .card_top { position: relative; } .card__svg { position: absolute; left: 0px; top: 0px; width: 300px; z-index:-10; } .card-body { color: black; }

 <div id="hvr-float" class="box"> <div id="card_top" style="background-position: center;background-repeat: no-repeat;background-size: cover;"> <div class="ribbon ribbon-top-right"><span><a href="/premium"><i class="fas fa-crown"></i> Premium</a></span></div> <img style="border: 2px solid grey;border-radius:50%;width:150px;height:150px;position:relative;left:60px;top:60px;" src="" class="card-img-top"> <svg class="card__svg" viewBox="0 0 800 500"> <path class="card__line" d="M 0 100 Q 50 200 100 250 Q 250 400 350 300 C 400 250 550 150 650 300 Q 750 450 800 400 V 0 H 0 Z" stroke="black" stroke-width="3" fill="red"/> </svg> </div> <div id="card-body" class="card-body"> <a style="color:#d4c078" href="/bots/" class="card-title"></a> <p class="card-text">test</p> <div class="card-footer"> </div> </div> </div>