CSS で中空効果を実装するサンプルコード

.mixinsTicket(@width, @height, @r, @left, @lcolor, @rcolor) {
    幅: @width;
    高さ: @height;
    背景：
              放射状グラデーション(右上の円、透明@r、@lcolor 0) -(@width - @left) 上部 ~'/' 100% 51% 繰り返しなし、
              放射状グラデーション(右下の円、透明@r、@lcolor 0) -(@width - @left) 下 ~'/' 100% 51% 繰り返しなし、
              放射状グラデーション(左上の円、透明@r、@rcolor 0) @left 0 ~'/' 100% 51% 繰り返しなし、
              放射状グラデーション(左下の円、透明@r、@rcolor 0) @left bottom ~'/' 100% 51% no-repeat;
} 

.mixinsTicket1(@width, @height, @r, @top, @color) {
   幅: @width;
   高さ: @height;
   背景：
               放射状グラデーション(左下の円、透明@r、@color 0) 左 (@top - @height) ~'/' 51% 100% 繰り返しなし、
               放射状グラデーション(左上の円、透明@r、@color 0) 左 @top ~'/' 51% 100% 繰り返しなし、
               放射状グラデーション(右下の円、透明@r、@color 0) 右 (@top - @height) ~'/' 51% 100% 繰り返しなし、
               放射状グラデーション(右上の円、透明@r、@color 0) 右 @top ~'/' 51% 100% 繰り返しなし;
   ＆：：後{
     コンテンツ： '';
     表示: ブロック;
     位置: 絶対;
     幅: calc(100% - 2 * @r);
     左: @r;
     トップ: @top;
     border-top: 1px 破線 #fff;
     変換: translateY(.5);
   }
}

.mixinFlag(@width, @height, @bg) の場合(default()) {
    幅: @width;
    高さ: @height;
    背景：
              線形グラデーション(45度、透明 sqrt(pow(@width/2, 2)/2)、@bg 0) 右、
              linear-gradient(-45度、透明、sqrt(pow(@width/2, 2)/2)、@bg 0) 左;
    背景サイズ: 50% 100%;
    背景繰り返し: 繰り返しなし;
 }
 .mixinFlag(@width, @height, @bg) の場合(@width > @height) {
    幅: @width;
    高さ: @height;
    背景：
              linear-gradient(-45deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) 左上、
              linear-gradient(-135deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) 左下;
    背景サイズ: 100% 50%;
    背景繰り返し: 繰り返しなし;
} 

.mixinsMark(@width, @height, @bg) {
    幅: @width;
    高さ: @height;
    背景：
              linear-gradient(-45deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) 左下、
              linear-gradient(-135deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) 左上;
    背景サイズ: 100% 50%;
    背景繰り返し: 繰り返しなし;
}

css {
    幅: 510ピクセル;
    高さ: 128px;
    背景: #FFF;
    背景画像: 線形グラデーション(rgba(182, 128, 102, .8) 8px, 透明 0),
                      線形グラデーション(90度、rgba(182, 128, 102, .8) 8px、透明0);
    背景サイズ: 8px 14px、14px 8px;
}

。マスク {
  位置: 固定;
  上: 0;
  左: 0;
  zインデックス: 100;
  幅：100vw;
  高さ：100vh;
  背景：
  放射状グラデーション(50% に最も近い側 278rpx、透明 140rpx、rgba(0, 0, 0, .12) 180rpx、rgba(0, 0, 0, .22) 200rpx、rgba(0,0,0,.3) 220rpx、rgba(0,0,0, .4)) 繰り返しなし;
}