I'm creating a SeatMap for a theater that contains 1001 seats, I'm using [jQuery-Seat-Charts](https://github.com/mateuszmarkowski/jQuery-Seat-Charts).

I want each row of seats to be a little curved around the stage (not horizontally straight as normal divs/rows).

I tried to use 
`shape-outside: ellipse();` and `clip-path: ellipse();` 
but it didn't work.

Can this be done with pure CSS? HOW ?

here is my code:

```js
$(document).ready(function() {
    var $cart = $('#selected-seats'),
        $counter = $('#counter'),
        $total = $('#total'),
        sc = $('#seat-map').seatCharts({
            seats: {
                A: {
                    price: 250,
                    classes: 'a_seat ground-floor',
                    category:'first class'
                },
                B: {
                    price: 1000,
                    classes: 'b_seat ground-floor',
                    category:'economy class'
                },
                C: {
                    price: 80,
                    classes: 'c_seat ground-floor',
                    category:'economy class'
                }

            },
            map: [
              '__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]',

            ],
            naming : {
                top : false,
                left: true,
                rows: ['A', 'B', 'C'],
                getLabel : function (character, row, column) {

                    return '<i class="fa fa-circle"></i>';
                },
                getId  : function(character, row, column) {
                    return row + '_' + column;
                }
            },
            legend : {
                node : $('#legend'),
                items : [
                    [ 'a', 'available',   'First Class' ],
                    [ 'b', 'available',   'Economy Class'],
                    [ 'c', 'unavailable', 'Already Booked']
                ]
            },
            click: function () {
                console.log(this.settings);
                if (this.status() == 'available') {
                    //let's create a new <li> which we'll add to the cart items
                    $('<li>'+this.data().category+' Seat # '+this.settings.id+': <b>$'+this.data().price+'</b> <a href="#" class="cancel-cart-item">[cancel]</a></li>')
                        .attr('id', 'cart-item-'+this.settings.id)
                        .data('seatId', this.settings.id)
                        .appendTo($cart);

                    /*
                     * Lets update the counter and total
                     *
                     * .find function will not find the current seat, because it will change its stauts only after return
                     * 'selected'. This is why we have to add 1 to the length and the current seat price to the total.
                     */
                    $counter.text(sc.find('selected').length+1);
                    $total.text(recalculateTotal(sc)+this.data().price);

                    return 'selected';
                } else if (this.status() == 'selected') {
                    //update the counter
                    $counter.text(sc.find('selected').length-1);
                    //and total
                    $total.text(recalculateTotal(sc)-this.data().price);

                    //remove the item from our cart
                    $('#cart-item-'+this.settings.id).remove();

                    //seat has been vacated
                    return 'available';
                } else if (this.status() == 'unavailable') {
                    //seat has been already booked
                    return 'unavailable';
                } else {
                    return this.style();
                }
            }
        });

    //this will handle "[cancel]" link clicks
    $('#selected-seats').on('click', '.cancel-cart-item', function () {
        //let's just trigger Click event on the appropriate seat, so we don't have to repeat the logic here
        sc.get($(this).parents('li:first').data('seatId')).click();
    });

    //let's pretend some seats have already been booked
    sc.get(['A1', '4_1', '7_1', '7_2']).status('unavailable');

});

function recalculateTotal(sc) {
    var total = 0;

    //basically find every selected seat and sum its price
    sc.find('selected').each(function () {
        total += this.data().price;
    });

    return total;
}
```

```css
div.seatCharts-container {
 /*min-width: 700px;*/
}
div.seatCharts-cell {

 height: 16px;
 width: 16px;
 margin: 1px;
 float: left;
 text-align: center;
 outline: none;
 font-size: 14px;
 line-height:16px;
 color: blue;

}
div.seatCharts-seat {
 /*background-color: green;*/
 color: #676967;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 cursor: default;
}
div.seatCharts-seat:focus {
 border: none;
}
/*
.seatCharts-seat:focus {
 outline: none;
}
*/

div.seatCharts-space {
 background-color: white;
}
div.seatCharts-row {
 height: 30px;
}

div.seatCharts-row:after {
 clear: both;
}

div.seatCharts-seat.selected {
 /*background-color: forestgreen;*/
    color:forestgreen;
}

div.seatCharts-seat.focused {
 /*background-color: #6db131;*/
    color: #6db131;
}

div.seatCharts-seat.available {
 /*background-color: green;*/
    color: #676967;
}

div.seatCharts-seat.unavailable {
 /*background-color: red;*/
    color: darkred;
 cursor: not-allowed;
}

ul.seatCharts-legendList {
 list-style: none;
}
li.seatCharts-legendItem {
 margin-top: 10px;
 line-height: 2;
}

/*stage*/
.stage {
    margin: 10px 85px;
    width: 80px;
    height: 30px;
    background-color: #b3b3b3;
    text-align:center;
}
```

```html
<!doctype html>
<html>
<head>
    <title>Seat Map</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>

<body>
<div class="wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div id="seat-map">
                    <div class="stage">Stage</div>
                </div>
            </div>
        </div>
        <div class="row">
          <div class="col-12">
                <div class="booking-details">
                    <h4>Booking Details</h4>
                    <h5> 
                    Selected Seats 
                    (<span id="counter">0</span>):
                    </h5>
                    <ul id="selected-seats"></ul>

                    Total: <b>$<span id="total">0</span>
                    </b>

                    <button class="checkout-button">
                    Checkout &raquo;
                    </button>

                    <div id="legend"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://rawgit.com/MostafaAttia/jQuery-Seat-Charts/master/jquery.seat-charts.js"></script>
</body>
</html>
```