I want to place a button on a border of a div that is clipped through the clip-path property. i have been able to clip the border but can't seem to place the button on the curved border. i have tried everything but can't seem to figure it out. Any help would be appreciated. Thanks in advance. I have posted the code below. Please check it out! Thanks.

.learningSection {
    width: 100%;
    height: auto;
    background: linear-gradient(90deg, #6a0bf5 -0.87%, #2461ed 100%);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: row;
    padding: 65px;
}
.freeTrialBtn {
    width: 217px;
    height: 35px;
    background: #11ee92;
    box-shadow: 0px 2px 2px rgb(0 0 0 / 20%);
    border-radius: 25px;
    align-items: center;
    border: 0;
}
@media only screen and (max-width: 490px)
.learningSection {
    content: "";
    position: relative;
    clip-path: ellipse(400px 100% at top);
}

<div >
    <div >
      <h1 >Start Learning</h1>
      <p >
        Learn 12 different languages in just ten minutes a day.
      </p>
      <form action="/enternumber" id="enternumber" method="POST">
        <input type="hidden" name="pckg" id="daily" value="jazz-sku-1-day" />
        <button  style="margin-top: 20px;">
          <p style="text-align:center;margin: 0;">Start Free Trial!</p>
        </button>
      </form></div>

I want the result the image to be like this

but the result is this

CodePudding user response：

I did it without the clip-path so if you must use clip-path you can change some of it . i used the border-radius and position absolute to make a backGround and then placed the button where i wanted it

 body {
            margin: 0;
            padding: 0;
        }
        .parent {
            width: 100%;
            height: 420px;
            overflow: hidden;
            position:relative;
            background-color:yellow;
           
        }
        .backgroundContainer {
            width: 120vw;
            height: 400px;
            background-color: blue;
            position: absolute;
            left: -10%;
            top: 0;
            border-radius: 0% 0% 50% 50%;
        }
        .content {
            background-color:red;
            position:absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            text-align:center;
            width: 50vw;
        }
        .btn {
            position:absolute;
            top: 95%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

<div >
        <div >
        </div>
        <div >
            <p>Lorem</p>
            <p>Lorem, ipsum dolor.</p>
        </div>
        <button >Click Me</button>
    </div>

CodePudding user response：

I hope you know what you are doing with Clip-path but remember that clip-path , CLIPS all its container so every element will get removed so you can't use elements on its border because they will get clipped so you need to use another container to use elements on it. Here is the code with clip-path.

body {
            margin: 0;
            padding: 0;
        }
        .container {
            background-color: green;
            width: auto;
            position: relative;
            height: 450px;
        }
        .parent {
            width: 100%;
            height: 420px;
            overflow: hidden;
            position:relative;
            margin:0 auto;
            clip-path: ellipse(1000px 100% at top);
           
        }
        .backgroundContainer {
            width: 100vw;
            height: 500px;
            background-color: blue;
            position: absolute;
            left: 0;
            top: 0;
       
        }
        .content {
            background-color:red;
            position:absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            text-align:center;
            width: 50vw;
        }
        .btn {
            position:absolute;
            top: 93%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

 <div >
        <div >
            <div ></div>
            <div >
                <p>Lorem</p>
                <p>Lorem, ipsum dolor.</p>
            </div>
        </div>
        <button >Click Me</button>
    </div>

hope i explained it well