Html 如何创建具有内部渐变的折叠功能区标题？

我希望创建一个具有环绕效果的标题，有点像这里的教程：

除了我想要一种更圆的形状，就像在这个学校网站上：

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

所以我想知道，我如何用实际的编码创建这个（包括梯度）

感谢您的任何想法/帮助！：）

---

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

好的，我的解决方案不是最好的，有很大的改进空间，但它可以工作。我已经从你提到的网站上用CSS重新创建了这个功能区菜单。顶部和底部的色带是绝对定位的，每个色带都有使用

插入的渐变：在
选择器之前，其余的是为每个元素设置右
边界半径，没有什么特别或复杂的

好的，我的解决方案不是最好的，有很大的改进空间，但它很有效。我已经从你提到的网站上用CSS重新创建了这个功能区菜单。顶部和底部的色带是绝对定位的，每个色带都有使用
插入的渐变：在
选择器之前，其余的是为每个元素设置右
边界半径，没有什么特别或复杂的

其实很简单。您只需要在
s之前使用
：：在
s之后使用
：


*{
框大小：边框框；
}
身体{
背景色：#09f；
}
导航{
宽度：200px；
高度：80px；
位置：相对位置；
利润率：50像素；
}
nav>.nav容器{
宽度：100%；
高度：80px；
背景色：#CCEBFF；
位置：相对位置；
z指数：2；
边界半径：15px 15px 0；
}
导航>导航容器>div{
位置：绝对位置；
顶部：32px；
宽度：100%；
高度：36px；
背景色：#fff；
填充：10px；
}
导航：之前，
导航：之后{
内容：“；
位置：绝对位置；
边界半径：15px；
}
导航：之前{
顶部：0px；
左：-22px；
宽度：44px；
高度：68px；
背景色：#fff；
}
导航：之后{
顶部：2个；
左：-20px；
宽度：40px；
高度：30px；
背景：#dddddd；
背景：-moz线性梯度（顶部，#dddddd0%，#99999100%）；
背景：-webkit线性梯度（顶部，#DDDD 0%，#999999 100%）；
背景：线性梯度（至底部，#dddddd0%，#99999100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#ddddddd'，endColorstr='#999999'，GradientType=0）；
}

你所有的物品
其实很简单。您只需要在
s之前使用
：：在
s之后使用
：


*{
框大小：边框框；
}
身体{
背景色：#09f；
}
导航{
宽度：200px；
高度：80px；
位置：相对位置；
利润率：50像素；
}
nav>.nav容器{
宽度：100%；
高度：80px；
背景色：#CCEBFF；
位置：相对位置；
z指数：2；
边界半径：15px 15px 0；
}
导航>导航容器>div{
位置：绝对位置；
顶部：32px；
宽度：100%；
高度：36px；
背景色：#fff；
填充：10px；
}
导航：之前，
导航：之后{
内容：“；
位置：绝对位置；
边界半径：15px；
}
导航：之前{
顶部：0px；
左：-22px；
宽度：44px；
高度：68px；
背景色：#fff；
}
导航：之后{
顶部：2个；
左：-20px；
宽度：40px；
高度：30px；
背景：#dddddd；
背景：-moz线性梯度（顶部，#dddddd0%，#99999100%）；
背景：-webkit线性梯度（顶部，#DDDD 0%，#999999 100%）；
背景：线性梯度（至底部，#dddddd0%，#99999100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#ddddddd'，endColorstr='#999999'，GradientType=0）；
}

你所有的物品
要使其成为纯CSS，这是一项非常困难的任务。最有可能的是，你不会得到答案，至少答案太宽泛了。制作它的常用方法是使用图像，因为使用CSSIs来完成形状非常复杂，有没有其他方法来创建形状而不是CSS？我告诉你，使用图像，就像原始示例所做的那样。
Edit:code不限于HTML和CSS。
错了，如果你想在web中设计一些样式，html和CSS是必不可少的。我想说的是，你不必只使用这两种语言，这是一项非常困难的任务，使其成为纯CSS。最有可能的是，你不会得到答案，至少答案太宽泛了。制作它的常用方法是使用图像，因为使用CSSIs来完成形状非常复杂，有没有其他方法来创建形状而不是CSS？我告诉你，使用图像，就像原始示例所做的那样。
Edit:code不限于HTML和CSS。
错了，如果你想在web中设计一些样式，html和CSS是必不可少的。我的意思是说你不必只使用这两种语言W！你在1秒的时候发帖打败了我。真是太棒了！你说它有很大的改进空间是什么意思？看起来不错！哇！你在1秒的时候发帖打败了我。真是太棒了！你说它有很大的改进空间是什么意思？看起来不错！做得很整齐！左边呢？做得很整齐！左边呢？