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

时间:2017-01-01 21:32:52

标签: html css

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

This is how I want the curved header to look

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

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

2 个答案:

答案 0 :(得分:1)

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

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



.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
}

<div class="outer">
  <div class="inner"></div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:-1)

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