如何创建带有内部渐变的折叠带标题？

Question

我正在寻找创建具有环绕效果的标题，有点像这里的教程：

http://code.tutsplus.com/tutorials/quick-tip-practical-css-shapes--net-11749

除非我希望它的形状比那个更圆，就像在这个学校网站上一样：

http://www.mowbray-p.schools.nsw.edu.au/home

但我放大了，通过横幅的像素化你可以看出这是一张图片。

所以我想知道，如何用实际编码创建这个（包括渐变）？

任何 ideas/help 感谢！ :)

编辑：代码不限于 HTML 和 CSS。

Answer 1

好吧，我的解决方案不是最好的，有很大的改进空间，但它有效。我仅使用 CSS 从您提到的站点重新创建了这个功能区菜单。顶部和底部色带是 absolute 定位的，每个色带都使用 :before 选择器插入渐变，剩下的就是为每个元素设置正确的 border-radius，不要太花哨或太复杂。

https://jsfiddle.net/ny46og69/

Answer 2

其实很简单。您只想使用 ::befores 和 ::afters

* {
  box-sizing: border-box;
}

body {
  background-color: #09f;
}

nav {
  width:200px;
  height:80px;
  position:relative;
  margin:50px;
}

nav > .nav-container {
  width:100%;
  height:80px;
  background-color:#CCEBFF;
  position:relative;
  z-index:2;
  border-radius: 15px 15px 0 0;
}

nav > .nav-container > div {
  position:absolute;
  top:32px;
  width:100%;
  height:36px;
  background-color: #fff;
  padding:10px;
}

nav::before,
nav::after{
  content: " ";
  position:absolute;
  border-radius:15px;
}

nav::before {
  top:0px;
  left:-22px;
  width:44px;
  height:68px;
  background-color:#fff;
}

nav::after {
  top:2px;
  left:-20px;
  width:40px;
  height:30px;
  background: #dddddd;
  background: -moz-linear-gradient(top,  #dddddd 0%, #999999 100%);
  background: -webkit-linear-gradient(top,  #dddddd 0%,#999999 100%);
  background: linear-gradient(to bottom,  #dddddd 0%,#999999 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(   startColorstr='#dddddd',   endColorstr='#999999',GradientType=0 );
}

<nav>
  <div class="nav-container">
    <div>
      All your items
    </div>
  </div>
</nav>

如何创建带有内部渐变的折叠带标题？

How to create a folding ribbon heading with inside gradient?

html

css

ribbon

heading