は、私はこのような放射状の勾配ものにしてdiv要素を表示する必要が

Question

divの中に複数の放射状の勾配を置くことが可能です：

<div class="ticketInfo"> 
    <div class="itemInfo"> 
    <h6 class="colorBlack">AREA</h6> 
    <h5 class="colorBlack">{{ticketSelected.location}}</h5> 
    </div> 
    <div class="itemInfo"> 
    <h6 class="colorBlack">DOORS</h6> 
    <h5 class="colorBlack">{{ticketSelected.date}}</h5> 
    </div> 
    <div class="itemInfo"> 
    <h6 class="colorBlack">DEPART</h6> 
    <h5 class="colorBlack">{{ticketSelected.time}}</h5> 
    </div> 
</div> 

私はCSSでこれを書く：

.ticketInfo { 
    display: flex; 
    flex-direction: column; 
    background-image: radial-gradient(circle at -2% 103%, $mainBackground 14px, white 15px), radial-gradient(circle at 100% 103%, $mainBackground 14px, white 15px); 
    padding: 13px; 
} 

しかし、私は上のような方法で最初のもの、左のもの、私が見ることができないものがあります。

私は助けが必要です！ありがとう!!

Answer 1

最初の勾配の白色が2番目の勾配よりも大きい場合は、transparentを設定して下の2番目の勾配を表示する必要があります。

.radial { 
 
    background-image: radial-gradient(circle at -2% 103%, red 14px, transparent 15px), radial-gradient(circle at 100% 103%, blue 14px, white 15px); 
 
    width: 300px; 
 
    height: 200px; 
 
}

<div class="radial"></div>