Html CSS：座位图的曲线分区/行

我正在为一个包含1001个座位的剧院创建一个座位图，我正在使用

我希望每一排座位在舞台周围都有一点弯曲（而不是像普通的观众席/排座位那样水平笔直）

我试着用

外部形状：椭圆（）和
剪辑路径：椭圆（）
但它不起作用

这可以用纯CSS实现吗？怎么做

这是我的密码：


$（文档）.ready（函数（）{
var$cart=$（“#选定座位”），
$counter=$（“#counter”），
$total=$（“#total”），
sc=$（“#座位地图”）。座位({
座位：{
A:{
价格：250，
课程：“一楼a_座”，
类别：'头等舱'
},
B:{
价格：1000，
课程：“b_座位底层”，
类别：'经济舱'
},
C:{
价格：80，
课程：“一楼c_座”，
类别：'经济舱'
}
},
地图：[
"A[A1]A[A2]A[A3]A[A4]A[A5]A[A6]A[A7]A[A8]"，
"B[B1]B[B2]B[B3]B[B4]B[B5]B[B6]B[B7]B[B8]B[B9]B[B10]"，
“C[C1]C[C2]C[C3]C[C4]C[C5]C[C6]C[C7]C[C8]C[C9]C[C10]C[C11]C[C12]”，
],
命名：{
上图：错，
左：对，
行：['A'，'B'，'C']，
getLabel:函数（字符、行、列）{
返回“”；
},
getId:函数（字符、行、列）{
返回行+''.'列；
}
},
图例：{
节点：$（“#图例”），
项目：[
[‘a’、‘可用’、‘头等舱’]，
[‘b’、‘可用’、‘经济舱’]，
[‘c’、‘不可用’、‘已预订’]
]
},
单击：函数（）{
console.log（this.settings）；
if（this.status（）==“可用”）{
//让我们创建一个新的
，将其添加到购物车项目中
$（“
”+this.data（）.category+”Seat#“+this.settings.id+”：$”+this.data（）.price+”
）
.attr（'id'，'cart item-'+this.settings.id）
.data（'seatId'，this.settings.id）
.appendTo（$cart）；
/*
*让我们更新计数器和总数
*
*.查找功能将找不到当前座位，因为它只有在返回后才会更改其座位
*“已选定”。这就是为什么我们必须在长度中添加1，在总长度中添加当前座位价格的原因。
*/
$counter.text（sc.find（'selected'）。长度+1）；
$total.text（重新计算总计（sc）+this.data（）.price）；
返回“选定”；
}else if（this.status（）=='selected'）{
//更新计数器
$counter.text（sc.find（'selected'）。长度为1）；
//和总数
$total.text（RecreacteTotal（sc）-this.data（）.price）；
//从我们的购物车中删除该项目
$（“#购物车项目-”+this.settings.id）.remove（）；
//座位已经空了
返回“可用”；
}else if（this.status（）=“不可用”）{
//座位已经订好了
返回“不可用”；
}否则{
返回此.style（）；
}
}
});
//这将处理“[取消]”链接单击
$（“#所选座位”）。在（'单击'，'上。取消购物车项目'，函数（）{
//让我们在适当的座位上触发Click事件，这样我们就不必重复这里的逻辑
sc.get（$（this）.parents（'li:first'）.data（'seatId'））.click（）；
});
//让我们假设一些座位已经预定了
sc.get（['A1'，'4_1'，'7_1'，'7_2']）。status（'unavailable'）；
});
函数重新计算总计（sc）{
var合计=0；
//基本上找到每一个选定的座位和总和其价格
sc.find（'selected'）。每个（函数（）{
合计+=此.data（）价格；
});
返回总数；
}
div.seatCharts-container{
/*最小宽度：700px*/
}
seatCharts-cell分区{
高度：16px；
宽度：16px；
保证金：1px；
浮动：左；
文本对齐：居中；
大纲：无；
字体大小：14px；
线高：16px；
颜色：蓝色；
}
副座椅{
/*背景颜色：绿色*/
颜色：#676967；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
游标：默认值；
}
副座椅-座椅：聚焦{
边界：无；
}
/*
.seatCharts座椅：聚焦{
大纲：无；
}
*/
seatCharts-space分区{
背景色：白色；
}
西查特街分区{
高度：30px；
}
西查特街分区：后{
明确：两者皆有；
}
选定的分区座椅{
/*背景色：森林绿*/
颜色：森林绿；
}
副座椅-座椅-聚焦{
/*背景色：#6db131*/
颜色：#6db131；
}
可供选择的分区座椅{
/*背景颜色：绿色*/
颜色：#676967；
}
分区座椅-座椅不可用{
/*背景色：红色*/
颜色：深色；
光标：不允许；
}
ul.seatCharts-legendList{
列表样式：无；
}
李·肖特哈特-传奇项目{
边缘顶部：10px；
线高：2；
}
/*舞台*/
.舞台{
利润率：10像素85像素；
宽度：80px；
高度：30px；
背景色：#B3；
文本对齐：居中；
}

座位图
阶段
预订详情
选定席位
Html File Code    
<div class="plane">
      <div class="cockpit">
        <h1>Please select a seat</h1>
      </div>
      <div class="exit exit--front fuselage">

      </div>
      <ol class="cabin fuselage">
        <li class="row row--1">
          <ol class="seats" type="A">
            <li class="seat">
              <input type="checkbox" id="1A" />
              <label for="1A">1A</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="1B" />
              <label for="1B">1B</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="1C" />
              <label for="1C">1C</label>
            </li>
            <li class="seat">
              <input type="checkbox" disabled id="1D" />
              <label for="1D">Occupied</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="1E" />
              <label for="1E">1E</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="1F" />
              <label for="1F">1F</label>
            </li>
          </ol>
        </li>
        <li class="row row--2">
          <ol class="seats" type="A">
            <li class="seat">
              <input type="checkbox" id="2A" />
              <label for="2A">2A</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="2B" />
              <label for="2B">2B</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="2C" />
              <label for="2C">2C</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="2D" />
              <label for="2D">2D</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="2E" />
              <label for="2E">2E</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="2F" />
              <label for="2F">2F</label>
            </li>
          </ol>
        </li>
        <li class="row row--3">
          <ol class="seats" type="A">
            <li class="seat">
              <input type="checkbox" id="3A" />
              <label for="3A">3A</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="3B" />
              <label for="3B">3B</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="3C" />
              <label for="3C">3C</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="3D" />
              <label for="3D">3D</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="3E" />
              <label for="3E">3E</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="3F" />
              <label for="3F">3F</label>
            </li>
          </ol>
        </li>
        <li class="row row--4">
          <ol class="seats" type="A">
            <li class="seat">
              <input type="checkbox" id="4A" />
              <label for="4A">4A</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="4B" />
              <label for="4B">4B</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="4C" />
              <label for="4C">4C</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="4D" />
              <label for="4D">4D</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="4E" />
              <label for="4E">4E</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="4F" />
              <label for="4F">4F</label>
            </li>
          </ol>
        </li>
        <li class="row row--5">
          <ol class="seats" type="A">
            <li class="seat">
              <input type="checkbox" id="5A" />
              <label for="5A">5A</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="5B" />
              <label for="5B">5B</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="5C" />
              <label for="5C">5C</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="5D" />
              <label for="5D">5D</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="5E" />
              <label for="5E">5E</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="5F" />
              <label for="5F">5F</label>
            </li>
          </ol>
        </li>
        <li class="row row--6">
          <ol class="seats" type="A">
            <li class="seat">
              <input type="checkbox" id="6A" />
              <label for="6A">6A</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="6B" />
              <label for="6B">6B</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="6C" />
              <label for="6C">6C</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="6D" />
              <label for="6D">6D</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="6E" />
              <label for="6E">6E</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="6F" />
              <label for="6F">6F</label>
            </li>
          </ol>
        </li>
        <li class="row row--7">
          <ol class="seats" type="A">
            <li class="seat">
              <input type="checkbox" id="7A" />
              <label for="7A">7A</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="7B" />
              <label for="7B">7B</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="7C" />
              <label for="7C">7C</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="7D" />
              <label for="7D">7D</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="7E" />
              <label for="7E">7E</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="7F" />
              <label for="7F">7F</label>
            </li>
          </ol>
        </li>
        <li class="row row--8">
          <ol class="seats" type="A">
            <li class="seat">
              <input type="checkbox" id="8A" />
              <label for="8A">8A</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="8B" />
              <label for="8B">8B</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="8C" />
              <label for="8C">8C</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="8D" />
              <label for="8D">8D</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="8E" />
              <label for="8E">8E</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="8F" />
              <label for="8F">8F</label>
            </li>
          </ol>
        </li>
        <li class="row row--9">
          <ol class="seats" type="A">
            <li class="seat">
              <input type="checkbox" id="9A" />
              <label for="9A">9A</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="9B" />
              <label for="9B">9B</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="9C" />
              <label for="9C">9C</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="9D" />
              <label for="9D">9D</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="9E" />
              <label for="9E">9E</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="9F" />
              <label for="9F">9F</label>
            </li>
          </ol>
        </li>
        <li class="row row--10">
          <ol class="seats" type="A">
            <li class="seat">
              <input type="checkbox" id="10A" />
              <label for="10A">10A</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="10B" />
              <label for="10B">10B</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="10C" />
              <label for="10C">10C</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="10D" />
              <label for="10D">10D</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="10E" />
              <label for="10E">10E</label>
            </li>
            <li class="seat">
              <input type="checkbox" id="10F" />
              <label for="10F">10F</label>
            </li>
          </ol>
        </li>
      </ol>
      <div class="exit exit--back fuselage">

      </div>
    </div>