如何在页面顶部绘制半圆[关闭]答案

【问题标题】：How to draw half circle at the top of the page [closed]如何在页面顶部绘制半圆[关闭]
【发布时间】：2021-01-12 01:15:20
【问题描述】：

我正在做一个项目，我需要在页面的左上角画半圈，我很努力但没有达到我的目标。我认为问这个问题可能很愚蠢，但相信我，我是新手到 CSS 和 HTML 。有人可以帮助我如何实现这一目标。代码示例将很有帮助并受到赞赏。

谢谢。

【问题讨论】：

您能提供您当前的导航代码吗？
你是从导航栏中的圆半径还是左上角被裁剪的紫色圆圈说话？
@johannchopin 是的，紫色圆圈。我需要像这样画同样的

标签： html css twitter-bootstrap sass flexbox

【解决方案1】：

如果您指的是导航栏的圆形末端，您可以使用border-radius 完成此操作。

如果你指的是背景圈，你可以使用radial gradient：

html, body {
  background-image: radial-gradient(circle, lavender 49px, transparent 50px);
  background-size: 100px;
  background-repeat: no-repeat;
  background-position: left -20px top -30px;
}

h1 {
  background: white;
  padding: 1rem 2rem;
  margin: 2rem;
  box-shadow: 0 8px 12px rgba(0,0,0,0.25);
  
  border-radius: 100px;
}

&lt;h1&gt;Bookfy&lt;/h1&gt;

【讨论】：

【解决方案2】：

这是左上角半圆的代码。

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <title>Semi Circle</title> 
  
    <style> 
        * { 
            margin: 0; 
            padding: 0; 
            background-color: white; 
  
        } 
        .semi-circle { 
            transform: translate(0, 0); 
            height: 100px; 
            width: 200px; 
            border-radius: 0 0 150px 150px; 
            background-color: #C0C0C0; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="semi-circle"></div> 
</body> 
  
</html>

something more..

【讨论】：

【解决方案3】：

你可以很容易地用纯css画出这个圆圈，然后用position: absolute把它定位在角落里：

.circle {
  position: absolute;
  transform: translate(-30%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #D8D5F5;
}

&lt;div class="circle"&gt;&lt;/div&gt;

【讨论】：