I am following the BattleCss Online daily quest and the html and css design I have to implement says I have to get halfsemi-circ

I really do not know how to make the curve designs on my page. All other parts of the design had been finalized by me. The yellow curves at the two ends are the problem Now this is my html and css so far in the challenge:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>new_web</title>
        <link rel="stylesheet" href="top.css">
        <style>
      body {
        display: flex;
        justify-content:center;
        align-items:center;
        background:#328FC1;
      }
      div {
        width: 140px;
        height: 140px;
        background: #FADE8B;
      }  
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>

I tried using chatgpt and gemini to find a way around it but the concepts were overwhelming like svg and stuff I don't know about. I started by so far having learnt all the html and css properties from W3Schools and other sites

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>new_web</title>
        <link rel="stylesheet" href="top.css">
        <style>
      body {
        display: flex;
        justify-content:center;
        align-items:center;
        background:#328FC1;
      }
      div {
        width: 140px;
        height: 140px;
        background: #FADE8B;
      }  
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>

Share Improve this question asked Jan 19 at 22:09 Frederick Oppong 11 silver badge

You need to show us top.css, or much better even: make a runnable Stack Snippet. – Peter B Commented Jan 19 at 22:27
2 CSSBattle is not really a site for beginners (but for code golfers). Their targets are for the most part not something you would encounter during everyday frontend work. – InSync Commented Jan 19 at 22:50

Add a comment |

1 Answer 1

Sorted by: Reset to default 1

Use radial-gradients at the corners.

* {
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #328FC1;
  min-height: 100vh;
  background-image: radial-gradient(circle at top left, #FADE8B 100px, transparent 100px), radial-gradient(circle at bottom right, #FADE8B 100px, transparent 100px);
}

div {
  width: 140px;
  height: 140px;
  background: #FADE8B;
}

<div></div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

I am following the BattleCss Online daily quest and the html and css design I have to implement says I have to get halfsemi-circ

1 Answer 1

与本文相关的文章

评论列表(0)