グラデーションの内側に折り畳みリボンの見出しを作成するにはどうすればよいですか？

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 Sを使用したいと::afterのそれの純粋なCSS作ることは非常に難しいタスクをだ

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