Wie bekomme ich diese Textausgabe mit CSS?

-2

Ich brauche diese Art von Ausgabe. Ich habe bereits mit Skew Hintergrund gemacht, aber Text bleibt übrig, brauche ich diesen Typ auf Textanordnung?Wie bekomme ich diese Textausgabe mit CSS?

aber ich bekomme diese statt:

.carousel-caption { 
 
    position: absolute; 
 
    background-color: #3e3273; 
 
    right: 25%; 
 
    left: 10%; 
 
    transform: skew(18deg, 0deg); 
 
    padding: 15px 45px; 
 
} 
 

 
.carousel-caption h3 { 
 
    font-size: 35px; 
 
    transform: skew(-18deg, 0deg); 
 
    font-family: "MyriadPro-Regular"; 
 
    margin-top: 10%; 
 
    color: #fff; 
 
    text-align: left; 
 
}

<div class="carousel-caption"> 
 
    <h3>Hey guys<br> please help me,<br> with this output</h3> 
 

 
</div>

Quelle

2017-02-27 ITbug

uns zeigen, was Sie haben versucht –

hallo das ist meine jsfiddle https://jsfiddle.net/bw63uevw/ – ITbug

Überprüfen Sie diesen Link https://sarasoueidan.com/blog/css-shapes/ –

einfach verwenden, um die No-Break Raum ( ) wie so ...

.carousel-caption { 
 
    position: absolute; 
 
    
 
    background-color: #3e3273; 
 
    right: 25%; 
 
    left: 10%; 
 
    transform: skew(18deg, 0deg); 
 
    padding: 15px 45px; 
 
} 
 

 
.carousel-caption h3 { 
 
    font-size: 35px; 
 
    transform: skew(-18deg, 0deg); 
 
    font-family: "MyriadPro-Regular"; 
 
    margin-top: 10%; 
 
    color: #fff; 
 
    text-align: left; 
 
}

<div class="carousel-caption"> 
 
      <h3>Hey guys 
 
      <br>&nbsp;please help me 
 
      <br>&nbsp;&nbsp;with this output 
 
      </h3> 
 
</div>

https://jsfiddle.net/bw63uevw/

Quelle

2017-02-27 07:16:20 Anthony

Dies ist keineswegs eine Garantie, dass die Schräglage gleich sein wird. –

@MrLister zwei Leerzeichen sind immer doppelt so lang wie ein Leerzeichen – Anthony

Ja, aber ein Einsenkungsstrich pro Zeile erzeugt nicht unbedingt einen Winkel von 18 Grad! –

Der Trick ist, nicht "de-Neigung" der h3 selbst, aber einige Blockelemente im Inneren und "de-Neigung" diejenigen zu setzen. Auf diese Weise werden sie korrekt positioniert.
(Beachten Sie, dass ich Spannweiten für die Leitungen in dem h3 verwendet, da mit fortlaufendem Inhalt wie divs des Validator einen Fehler wäre nach.)

.carousel-caption { 
 
    position: absolute; 
 
    background-color: #3e3273; 
 
    right: 25%; 
 
    left: 10%; 
 
    transform: skew(18deg, 0deg); 
 
    padding: 15px 45px; 
 
} 
 

 
.carousel-caption h3 { 
 
    font-size: 35px; 
 
    font-family: "MyriadPro-Regular"; 
 
    margin-top: 10%; 
 
    color: #fff; 
 
    text-align: left; 
 
} 
 

 
.carousel-caption h3 .line { 
 
    transform: skew(-18deg, 0deg); 
 
    display:block; 
 
}

<div class="carousel-caption"> 
 
    <h3> 
 
    <span class="line">Hey guys</span> 
 
    <span class="line">please help me,</span> 
 
    <span class="line">with this output</span> 
 
    </h3> 
 

 
</div>

Quelle

2017-02-27 19:12:00

das wäre ein anderer Weg, wahrscheinlich ein zuverlässigerer Weg als ich erwähnt. Zuerst versuchte ich, Spannen mit gestaffelten Paddings zu verwenden, aber es schien keine Wirkung zu haben. – Anthony

keine Ahnung, warum die Verwendung von festen Paddings oder Margen nicht auf Spannen funktioniert? – Anthony

@Anthony Spans können zumindest horizontal gepolstert sein. Vielleicht gab es noch etwas anderes, das schief gelaufen ist? –

Wie bekomme ich diese Textausgabe mit CSS?

Antwort

Verwandte Themen