如何从div中减去多个形状

时间：2019-05-08 13:08:38

标签： css html5 css3

我通常在CSS中做一些事情。最近，我看到了一个有趣的布局，可以模拟电影票，因此我决定重新制作它。

我想在div中进行一些圆形切割。尝试模拟CSS中电影票的剪辑（如图所示）。

我得到的结果：https://i.imgur.com/06hL3Ic.png

这是我的代码：

body{
    margin: 0 auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}

.header-text{
    margin-left: 0.5em;
    font-weight: 700;
    margin-bottom: 0.5em;
    font-family: 'Roboto', sans-serif;
    font-size: 25px;
    color: rgb(241, 241, 241);
}

.ticket{
    background: white;
    border-radius: 15px 15px 8px 8px;
    box-shadow: 21px 35px 31px -9px rgba(0,0,0,0.22);
}

.main-container{
    position: absolute;
    padding-top: 4em;
    margin: auto;
    right: 0;
    left: 0;
    width: 20em;
    height: 55vh;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto 2fr;
    grid-gap: 0.3em;
}


.movie-header img{
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    width: 100%;
}

.movie-name{
    font-family: 'Roboto', sans-serif;
    margin: 1.5em 2em 2em 2em;
}


.ticket-data{
    font-family: 'Roboto', sans-serif;
    display:grid;
    grid-gap: 1.3em;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    margin: 1em 1em 2.1em 1em ;
}

.ticket-data h4{
    margin-bottom: 0.3em;
    color:gray;
}

.code{
    background-color: white;
    border-radius: 8px 8px 13px 13px;
    box-shadow: 21px 35px 31px -9px rgba(0,0,0,0.22);
}

.code svg{
    margin:1em 0 0.7em 0;
    width: 100%;
}

h1,h2,h3,h4,h5{
    padding: 0;
    margin: 0;
}

h2{
    font-weight: 700;
}

h4{
    font-weight: 300;
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Ticket</title>
</head>
<body>
    <div class="main-container">
        <div class="header">
            <div class="header-text">My ticket</div>
        </div>
        <div class="ticket">
            <div class="movie-header">
                <img src="https://imagenes.milenio.com/3eP1CnuB6jTeheFS4i7aFhRUvsI=/958x596/smart/https://www.milenio.com/uploads/media/2019/03/19/avengers-endgame-twitter-1_0_146_810_504.jpg">
            </div>
            <div class="movie-name">
                <h4>Movie:</h4>
                <h2>Marvel: End Game</h2>
            </div>
            <div class="ticket-data">
                <div class="ticket-data-item">
                    <h4>Screen</h4>
                    <h3>02</h3>
                </div>
                <div class="ticket-data-item">
                    <h4>Row</h4>
                    <h3>F</h3>
                </div>
                <div class="ticket-data-item">
                    <h4>Seat</h4>
                    <h3>06</h3>
                </div>
                <div class="ticket-data-item">
                    <h4>Price</h4>
                    <h3>48€</h3>
                </div>
                <div class="ticket-data-item">
                    <h4>Date</h4>
                    <h3>22 Mar</h3>
                </div>
                <div class="ticket-data-item">
                    <h4>Time</h4>
                    <h3>16:45</h3>
                </div>
            </div>
        </div>
        <div class="code">
                <svg id="barcode"></svg>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
    <script>
        JsBarcode("#barcode", "1337d22z14M75", {
        format: "CODE39",
        lineColor: "#000",
        width: 1,
        height: 68,
        displayValue: true
        });
    </script>
</body>
</html>

我尝试使用css的clip-path属性。但是它给出了相反的结果

1 个答案:

答案 0 :(得分：0)

为此，您可以使用before和after，我给您一个想法，剩下的工作适合您

.ticket::after {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    bottom: 18px;
    left: -10px;
    background-color: skyblue;
}

在css上方添加以使其圆润

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Ticket</title>
    <style>
    body{
    margin: 0 auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%); */
    background-color: skyblue; 
}

.header-text{
    margin-left: 0.5em;
    font-weight: 700;
    margin-bottom: 0.5em;
    font-family: 'Roboto', sans-serif;
    font-size: 25px;
    color: rgb(241, 241, 241);
}

.ticket{
    background: white;
    border-radius: 15px 15px 8px 8px;
    box-shadow: 21px 35px 31px -9px rgba(0,0,0,0.22);
    position: relative;
}

.ticket::after {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    bottom: -12px;
    left: -11px;
    background-color: skyblue;
}

.main-container{
    position: absolute;
    padding-top: 4em;
    margin: auto;
    right: 0;
    left: 0;
    width: 20em;
    height: 55vh;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto 2fr;
    grid-gap: 0.3em;
}


.movie-header img{
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    width: 100%;
}

.movie-name{
    font-family: 'Roboto', sans-serif;
    margin: 1.5em 2em 2em 2em;
}


.ticket-data{
    font-family: 'Roboto', sans-serif;
    display:grid;
    grid-gap: 1.3em;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    margin: 1em 1em 2.1em 1em ;
}

.ticket-data h4{
    margin-bottom: 0.3em;
    color:gray;
}

.code{
    background-color: white;
    border-radius: 8px 8px 13px 13px;
    box-shadow: 21px 35px 31px -9px rgba(0,0,0,0.22);
}

.code svg{
    margin:1em 0 0.7em 0;
    width: 100%;
}

h1,h2,h3,h4,h5{
    padding: 0;
    margin: 0;
}

h2{
    font-weight: 700;
}

h4{
    font-weight: 300;
}
</style>
</head>
<body>
    <div class="main-container">
        <div class="header">
            <div class="header-text">My ticket</div>
        </div>
        <div class="ticket">
            <div class="movie-header">
                <img src="https://imagenes.milenio.com/3eP1CnuB6jTeheFS4i7aFhRUvsI=/958x596/smart/https://www.milenio.com/uploads/media/2019/03/19/avengers-endgame-twitter-1_0_146_810_504.jpg">
            </div>
            <div class="movie-name">
                <h4>Movie:</h4>
                <h2>Marvel: End Game</h2>
            </div>
            <div class="ticket-data">
                <div class="ticket-data-item">
                    <h4>Screen</h4>
                    <h3>02</h3>
                </div>
                <div class="ticket-data-item">
                    <h4>Row</h4>
                    <h3>F</h3>
                </div>
                <div class="ticket-data-item">
                    <h4>Seat</h4>
                    <h3>06</h3>
                </div>
                <div class="ticket-data-item">
                    <h4>Price</h4>
                    <h3>48€</h3>
                </div>
                <div class="ticket-data-item">
                    <h4>Date</h4>
                    <h3>22 Mar</h3>
                </div>
                <div class="ticket-data-item">
                    <h4>Time</h4>
                    <h3>16:45</h3>
                </div>
            </div>
        </div>
        <div class="code">
                <svg id="barcode"></svg>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
    <script>
        JsBarcode("#barcode", "1337d22z14M75", {
        format: "CODE39",
        lineColor: "#000",
        width: 1,
        height: 68,
        displayValue: true
        });
    </script>
</body>
</html>

相关问题
最新问题