是否可以在div

Question

我需要向径向渐变显示一个这样的div：

我在这样的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

第一个渐变的白色超过第二个渐变，您必须设置transparent才能看到下面的第二个渐变。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;