如何使用内部渐变创建折叠色带标题？

Question

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

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

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

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

但我放大了，通过横幅的像素化你可以告诉它是一个图像。

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

任何想法/帮助表示赞赏！ ：）

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

Answer 1

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

https://jsfiddle.net/ny46og69/

Answer 2

实际上很简单。您只想使用::before和::after s

* {
  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>