在 HTML CSS 中创建特写半圆

Question

我在 html css 中被要求为我的项目创建类似半圆形的设计，它看起来像这样：

Figma Design 但它确实“放大”了。

我试着做到了，最接近的我看起来像这样： My Closest

使用此代码：

.semi-circle {
  transform: translate(0, 0);
  height: 150px;
  width: 100%;
  border-radius: 0 0 150px 150px;
  /* border-radius: 0 0 150px 150px;  */
  background-color: #0E47A1;
}

<div class="semi-circle"></div>

我可以调整什么以及如何使它像设计的那样

Answer 1

我已经使用::after创建了效果，你可以改变height得到想要的曲线。

.curve{
  position: relative;
  width: 300px;
  height: 200px;
  margin: auto;
  overflow: hidden;
}
.curve::after{
  content: "";
  position: absolute;
  top: 0px;
  left: 50%;
  border-radius:50%;
  background: blue;
  width:500px;
  height:300px;
  transform: translate(-50%, -50%);
}

<div class="curve"></div>

Answer 2

这看起来像示例。它反应灵敏，适合任何屏幕。

.semi-circle {
  transform: translate(0, 0);
  height: 150%;
  width: 150%;
  border-radius: 50%;
  /* border-radius: 0 0 150px 150px;  */
  background-color: #0E47A1;
  position: absolute;
  top: -90%;
  left: -22.5%;
}

body {
  overflow: hidden;
}

<div class="semi-circle"></div>

Answer 3

这是给你的一些想法。你可以将它设置为变换然后旋转它同时在顶部放置一个假 div 这样你就可以覆盖所有剩余的蓝色。让我知道。

body {background-color:lightgrey;}

.semi-circle { 
  height: 200px; 
  width: 200px; 
  border-radius : 50%;             
  background-color: #0E47A1; 
  margin-top:0px;
  transform: scale(1.5) rotateX(105deg);  
  overflow:hidden;
  align-items:center;
  margin-left:50px;

} 

.box { 
  width: 300px;
  height: 800px;
  border:1px solid gray;
  background-color:white;
  }
 
.blue {
  background-color:#0E47A1;
  height:100px;
  }

.whitebox {
  width:220px;
  height:40px;
  line-height:1;
  margin:0 auto;
  box-shadow: 2px 2px 4px 2px gray;
  text-align:center;
  padding:10px;
  border-radius:20px;
  position:absolute;
  top:120px;
  left:40px;
  background-color:white;
  }

<body> 
  
 <div>Home</div>
 
  <div class="box">
  <div class="blue">
   <div class="semi-circle"></div> 
    <div class="whitebox">Hello Visitors!
     <span>this is the hidden text......</span>
    </div>
   </div>
  </div>
 </body>

在 HTML CSS 中创建特写半圆

Create Close-up Half Circle in HTML CSS

html

javascript

css

figma