How to make a different div within the same document?-CodePudding

At first I just want to say sorry because I have not seen any answer to my problem online but probably it is somewhere. Basically i want another div but don't know the syntax required to do so.

<!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>Target #4 Ups n Downs</title>
  </head>
  <style>
    body {
      background: #62306d;
      display: flex;
      justify-content: center;
      align-items: center;
      
      /* min-height: 100vh; */
    }

    div {
      width: 100px;
      height: 100px;
      background: #f7ec7d;
    }

    div:nth-of-type(2n   1) {
      border-radius: 0% 0% 50% 50%;
      transform: translateY(50px);
    }

    div:nth-of-type(2n) {
      border-radius: 50% 50% 0% 0%;
      transform: translateY(-50px);
    }
  </style>
  <body>
    <div></div>
    <div></div>
    <div></div>
  </body>
</html>

2 This is my code the image i'm trying to achieve is what the first one would show, but I have no idea how to name or make it work. I want to make another div so I can make : border-radius: 50% 50% 0 0 ; instead of this: border-radius: 0 0 50% 50% ;

<style>
    body {
      background: #62306D;
      margin: 0;
    }
    div {
      width:100;
      height:100;
      background: #F7EC7D;
      margin: 50 100 0 150;
      border-radius: 0 0 50% 50%;
      box-shadow:  100px 100px 0 0 #F7EC7D,  -100px 100px 0  #F7EC7D; border-radius: 0 0 50% 50%;
     
     {   
     ???{
         width:100;
      height:100;
      background: #F7EC7D;
      margin: 50 100 0 150;
        border-radius: 50% 50% 0 0 ;
       }
 </style>
  <body>
    <div></div>
  </body>

<html lang="en">
<head>
<meta charset="UTF-8"
<meta name="viewport" content="width=device-width", initial-scale=1.0">
  <title>Document</title>
  
  <style>
    body {
      background: #62306D;
      margin: 0;
    }
    #firstdiv {
      width:100;
      height:100;
      background: #F7EC7D;
      margin: 150 0 0 50;
      border-radius: 0 0 50% 50%;
      box-shadow: 200px 0px 0 0 #F7EC7D;
     
    }  
 #seconddiv{
         width:100;
      height:100;
      background: #F7EC7D;
      margin: -200 100 0 150;
        border-radius:  50%  50% 0 0;
       }
 </style>
  </head>
  <body>
    <div id ="firstdiv"></div>
    <div id ="seconddiv"></div>
  </body>
</html>

thanks to Jawwad Haider for giving me the idea of #firstdiv{} #seconddiv{} and id.

CodePudding user response：

What I can extract from your problem is you want to add two different CSS styles to different div, if I am assuming right then you can use to give ids to div to differentiate them then define there style separately as I have mentioned in image below:

View image