Search code examples
htmlcssheaderborder-radius

How can I achieve this kind of box-styling in CSS

I just came across a website where almost all the div were styled that way, and I would be interested to know how it is done.

enter image description here

Solution

  • You can easily get the orange shape by using the clip-path property. I used a Generator to make this shape.

    p {
            margin: 0;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .card {
            width: 300px;
            background-color: #1D1D1D;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .heading {
            font-size: 18px;
            text-transform: uppercase;
            color: white;

        }

        .orange {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 20px;
            width: 100%;
            height: 100px;
            margin-top: 0;
            background-color: #FB961B;
            clip-path: polygon(0 0, 100% 0, 100% 50%, 60% 100%, 40% 100%, 0% 50%);
        }

        .container {
            margin: 10px 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        p{
            color: white;
        }
        #heading{
            font-size: 18px;
            text-transform: uppercase;
        }

        .para{
            margin-bottom: 20px;
        }
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="card">
        <div class="orange">
            <p class="heading">starter</p>
            <p class="para">weekly 100% for 4 times</p>
        </div>
        <div class="container">
            <p id="heading">weekly return</p>
            <p>Lorem ipsum... </p>
        </div>
    </div>
</body>

</html>