Banderole über Seite mit Text mit CSS

Question

Ich versuche, eine Banderole (ich hoffe, das ist das richtige Wort) über eine Seite mit CSS zu erstellen.
Was ich erreichen möchte:
Idealerweise sollte die Banderole reaktionsfreudig und in einem Element verpackt sein, so dass ich mehrere dieser Banderolen auf einer Seite untereinander platzieren kann.
Ich habe mich versucht, eine Banderole zu bauen, aber das Ergebnis ist weit davon entfernt, was ich will:

HTML:

<div class="section"> 
    <div class="banderole"> 
    <div class="banderole-content"> 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
     sanctus est Lorem ipsum dolor sit amet. 
    </div> 
    </div> 
</div> 

CSS:

.banderole { 
    width: 600px; 
    height: 300px; 
    background-color: green; 
    position: absolute; 
    top: 25px; 
    left: 50px; 
    text-align: center; 
    color: #f0f0f0; 
    transform: rotate(-45deg); 
    -webkit-transform: rotate(-45deg); 
    } 

    .banderole-content { 
    transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    } 

    .section { 
    background-color: black; 
    } 

JSFiddle

Ist es möglich, eine solche Banderole in CSS zu bauen?

Vielen Dank im Voraus für die Hilfe

Answer 1

Sie CSS translate() und skew() Eigenschaften der Transformation verwenden können.

Werfen Sie einen Blick auf das Snippet unten (Verwendung Ganzseitendarstellung es richtig zu sehen):

html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    background: green; 
 
    position: relative; 
 
} 
 

 
.content-holder { 
 
    position: absolute; 
 
    background: #fff; 
 
    width: 350px; 
 
    height: 100vh; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%) skew(-20deg); 
 
} 
 

 
.text { 
 
    position: absolute; 
 
    width: 250px; 
 
} 
 

 
.top { 
 
    top: 25%; 
 
    left: 55%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.bottom { 
 
    top: 75%; 
 
    left: 45%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="content-holder"></div> 
 

 
<div class="text top">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi molestiae repellat rerum quam quos incidunt, dolore delectus necessitatibus nobis, nesciunt dolorum odio, blanditiis minus iusto, ratione id. Est, sit, ut.</div> 
 

 
<div class="text bottom">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi molestiae repellat rerum quam quos incidunt, dolore delectus necessitatibus nobis, nesciunt dolorum odio, blanditiis minus iusto, ratione id. Est, sit, ut.</div>

hoffe, das hilft!

Answer 2

mit transform: skew() Methode Versuchen:

.banderole { 
 
    width: 100px; 
 
    height: 100%; 
 
    background-color: green; 
 
    position: absolute; 
 
    margin: 0 auto; 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
    color: #f0f0f0; 
 
    -webkit-transform: skew(-20deg, 0); 
 
    -moz-transform: skew(-20deg, 0); 
 
    -o-transform: skew(-20deg, 0); 
 
    -ms-transform: skew(-20deg, 0); 
 
    transform: skew(-20deg, 0); 
 
} 
 
.section { 
 
    background-color: black; 
 
}

<div class="section"> 
 
    <div class="banderole"> 
 
    <div class="banderole-content"> 
 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
 
     sanctus est Lorem ipsum dolor sit amet. 
 
    </div> 
 
    </div> 
 
</div>

JSFiddle