Question

我知道这个问题已被提出，但设计实施的方式并不是我想要的。

This is how I want the curved header to look

我已尝试左右边框半径，但边缘太圆了。

关于如何实现这一目标的任何想法？编辑：我知道我需要border-radius，我想说的是我不希望半径看起来很圆。我希望它完全符合我与图片相关的内容。我不理解downvote的原因。

Answer 1

这完全可以通过CSS实现 - 只需要一个嵌套的div - 为它们应用不同的大小和颜色，并使内部的大于外部，但具有不同的overfow可见性。以下在底部创建弯曲弧。您可以使用样式来获得所需的结果。

它仍然使用border-radius：50％，但是因为应用了边框半径的div比显示的大得多 - 弯曲的边框是一个更柔和的弧。

＆＃13;

.outer{
  width:500px;
  height:200px;
  background:white;
  position:relative;
  overflow:hidden
}

.inner{
  width:1000px;
  height:200px;
  background:#29465E;
  border-radius: 50%;
  position:absolute;
  left:-50%;
  top:-25%;
  overflow:visible
}

＆＃13;

<div class="outer">
  <div class="inner"></div>
</div>

＆＃13;

Answer 2

这不是一个CSS设置，它只是一个背景图片。

如何将标题部分的底部弯曲？

2 个答案: