Wie erstellt man einen Faltbandkopf mit Innenverlauf?

Question

Ich suche eine Überschrift mit einem Umgriffseffekt, die Art wie dieses Tutorial hier für die Erstellung von:

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

Außer, dass ich es als in einer runderen Form Art will, wie in dieser Schule Webseite :

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

Aber ich vergrößert und durch die pixelation des Banners können Sie sagen, es ein Bild ist.

Also ich frage mich, wie erstelle ich diesen (einschließlich Gradient) mit tatsächlichen Codierung?

Irgendwelche Ideen/Hilfe geschätzt! :)

Edit: Code ist nicht auf HTML und CSS beschränkt.

Answer 1

Okay, meine Lösung ist nicht die beste, hat einen großen Raum für Verbesserungen, aber es funktioniert. Ich habe dieses Ribbon-Menü von der Seite, die Sie erwähnt haben, nur mit CSS neu erstellt. Obere und untere Bänder sind absolute positioniert, jeder Gradient eingefügt mit :before Selektor, der Rest ist die richtige border-radius für jedes Element, nichts zu ausgefallen oder zu kompliziert.

https://jsfiddle.net/ny46og69/

Answer 2

Es ist eigentlich einfach. Sie wollen einfach nur ::before s und ::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>