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

【问题标题】：How to create a folding ribbon heading with inside gradient?如何创建带有内部渐变的折叠色带标题？
【发布时间】：2016-07-04 09:38:27
【问题描述】：

我正在寻找一个带有环绕效果的标题，有点像这里的教程：

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

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

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

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

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

任何想法/帮助表示赞赏！ :)

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

【问题讨论】：

要使其成为纯 CSS 是一项非常艰巨的任务。最有可能的是你不会得到答案，至少太宽泛了。制作它的常用方法是使用图像，因为使用 CSS 完成形状非常复杂
除了CSS还有其他方法吗？
我用图片告诉你，就像原来的例子一样。
Edit: code is not limited to HTML and CSS.错了，如果你想在网页中设置一些样式，html和CSS是必不可少的。
我的意思是说你不必只使用两种语言

标签： html css ribbon heading

【解决方案1】：

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

https://jsfiddle.net/ny46og69/

【讨论】：

哇！你在 1 秒发帖时击败了我：D。小提琴不错！
你说它还有很大的改进空间是什么意思？看起来不错！

【解决方案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>

【讨论】：

做的很漂亮！左边呢？