Ruban ou bandeau

En regardant un ancien code, trouvé sur le net, j'ai voulu le réaliser avec mon style d'écriture de codes, dans un montage de 60% de la largeur de votre écran.

Ceci n'est qu'un exemple à personnaliser.

<div id="bd0">
<p id="bd1">La zone texte<br />qui doit commencer sous le bandeau<br />et dans laquelle vous pouvez placer ce que vous voulez: texte, images, liens...</p>
<p id="bd2">Le bandeau.<br />Avec le sujet trait&eacute;.</p>
<p id="bd4">&nbsp;</p>
<p id="bd5">&nbsp;</p>
</div>
<style><!--
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script&display=swap');
@import url('https://fonts.googleapis.com/css?family=Dancing+Script|Kaushan+Script&display=swap');
#bd0{position:relative; width:60vw; height:30vw; border:0.1vh solid black; margin:1vh auto; text-align:left;}
#bd1{position:absolute; z-index:2; box-sizing:padding-box; width:56vw; height:18vw; border:0.1vh solid black; background:#F5F5DC; margin:1vh auto; text-align:center; padding:11vw 0.5vh 0.5vh 0.5vh; font-family: 'Dancing Script', cursive; font-size:1.5vw; transform:translate(2vw,-0.5vw);}
#bd2{position:absolute; z-index:5; width:59.2vw; height:7vw; background:lime; text-align:center; padding:1vh; font-size:2vw; font-family: 'Kaushan Script', cursive; box-shadow:inset -0.6vh -0.6vh 0.8vh green, inset 0.6vh 0.6vh 0.8vh green; line-height:3.5vw; transform:translate(0vw,2vw);}
#bd4{position:absolute; z-index:1; width:5vw; height:7vw; background:green; transform:translate(0vw,3.5vw) skewy(15deg);}
#bd5{position:absolute; z-index:1; width:5vw; height:7vw; background:green; transform:translate(55vw,3.6vw) skewy(-15deg);}
--></style>