Konteynırda eğik metni sola hizalayın

Question

Bir elemana çarpıklık uygulamak ve döndürmek zorundayım. "Merhaba" dan (H: Düzgün çalışır ancak çarpık metni en konteyner (sonuç resme bakın) içinde sola hizalanmış değildir:

soldaki metin kapsayıcı taşan) ve T ("The") hizalaması doğru değil. büyük boy olması bunun bir sonucudur böylece dönme ile

.skew-parent-wrapper { 
 
    width: 300px; 
 
    margin-left: 100px; 
 
    margin-top: 50px; 
 
    border: 1px solid red; 
 
    padding-bottom: 30px; 
 
} 
 

 
.skew-text { 
 
    -moz-transform: rotate(-10deg) skew(-30deg, 0deg); 
 
    -webkit-transform: rotate(-10deg) skew(-30deg, 0deg); 
 
    -o-transform: rotate(-10deg) skew(-30deg, 0deg); 
 
    -ms-transform: rotate(-10deg) skew(-30deg, 0deg); 
 
    transform: rotate(-10deg) skew(-30deg, 0deg); 
 
}

<div class="skew-parent-wrapper"> 
 
    <h1 class="skew-text">Hello Welcome to the skew text</h1> 
 
</div>

Answer 1

ve bakış açısı gibi bir davranışı alacak çarpık:

Bu

Ben başarmak için çalışıyorum budur . Eğrilik metninizi el ile ölçeklendirmeniz ve ardından kapsayıcısının taşmasını devre dışı bırakmanız gerekir; böylece çakışan bir metin görmezsiniz.

Bunu düzeltmemin tek yolu budur. dikey bir çizgi yamuk metin hizalama arasında

Answer 2

bir yolu, olumsuz text-indent set manuel etmektir. Bu teknik aynı zamanda sol alt taraftaki bir transform-origin ayarlamak gerekir:

.skew-parent-wrapper { 
 
    width: 300px; 
 
    margin-left: 100px; 
 
    margin-top: 50px; 
 
    border: 1px solid red; 
 
    padding-top: 30px; 
 
} 
 

 
.skew-text { 
 
    transform: rotate(-10deg) skew(-30deg, 0deg); 
 
    transform-origin: 0 100%; 
 
    text-indent: -15px; 
 
}

<div class="skew-parent-wrapper"> 
 
    <h1 class="skew-text">Hello Welcome to the skew text</h1> 
 
</div>

Bu teknik sadece iki satırda sarar metin üzerinde çalışır. 2'den fazla çizgileri ile Metin için, (a <span> gibi) etiketindeki her satırı kaydırmak gerekir: Eğer <span>display:block için belirlemeniz gereken

.skew-parent-wrapper { 
 
    width: 300px; 
 
    margin-left: 100px; 
 
    margin-top: 50px; 
 
    border: 1px solid red; 
 
    padding-top: 30px; 
 
} 
 

 
.skew-text span{ 
 
    display:block; 
 
    transform: rotate(-10deg) skew(-30deg, 0deg); 
 
    transform-origin: 0 100%; 
 
}

<div class="skew-parent-wrapper"> 
 
    <h1 class="skew-text"> 
 
    <span>Hello Welcome to the</span> 
 
    <span>skewed text with</span> 
 
    <span>several lines many</span> 
 
    <span>many many lines</span> 
 
    </h1> 
 
</div>

Not çünkü transforms don't apply on inline elements.

Answer 3

Dönüş olarak dönüşü kullanırsanız hizalamayı elde etmek zordur.

Eğik çizgiler almak için eğri kullanın. Sen (bir dereceye kadar) italik

Ayrıca

kullanarak harflerin üzerine açısını elde edebilirsiniz, tüm satıcı özgü gerek yoktur Esasen

.skew-parent-wrapper { 
 
    width: 300px; 
 
    margin-left: 100px; 
 
    margin-top: 50px; 
 
    border: 1px solid red; 
 
    padding-bottom: 30px; 
 
} 
 

 
.skew-text { 
 
    transform: skewY(-20deg); 
 
    font-style: italic; 
 
    background-color: goldenrod; 
 
}

<div class="skew-parent-wrapper"> 
 
    <h1 class="skew-text">Hello Welcome to the skewed text that can span several lines</h1> 
 
</div>