文本調整與CSS形狀

我有一些文字裏面的平行四邊形，問題是，當我調整窗口的文本失去了所有的屬性，我已經嘗試過vw，vh，em，pt，rem和px 另外我已經嘗試過@media屏幕和（min-width：320px;）但是nothings似乎工作，目前這是我到目前爲止，我希望你能幫助我。文本調整與CSS形狀

.paralelo { 
 
    margin-top: 8%; 
 
    margin-left: 0%; 
 
    padding-left: 0; 
 
    text-align: right; 
 
    width: 48%; 
 
    height: 50%; 
 
    max-height: 10px; 
 
    border-top: 50px solid #c5027f; 
 
    border-right: 30px solid #FFf; 
 
} 
 

 
.who { 
 
    font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif; 
 
    font-size: 3em; 
 
    font-weight: 400; 
 
    color: white; 
 
    margin-top: -21.5%; 
 
    margin-right: 12px; 
 
}

<div class="paralelo"> 
 
    <p class="who">Servicios</p> 
 
</div>

來源

2017-04-17 Carmen Amaro

嘗試使用position，如：

.paralelo { 
 
    position: relative; /* -- add this line */ 
 

 
    margin-top: 8%; 
 
    margin-left: 0%; 
 
    padding-left: 0; 
 
    text-align: right; 
 
    width: 48%; 
 
    height: 50%; 
 
    max-height: 10px; 
 
    border-top: 50px solid #c5027f; 
 
    border-right: 30px solid #FFf; 
 
} 
 

 
.who { 
 
    position: absolute; /* -- add this line */ 
 
    top: -100px; /* -- add this line */ 
 
    right: 12px; /* -- add this line */ 
 
    
 
    font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif; 
 
    font-size: 3em; 
 
    font-weight: 400; 
 
    color: white; 
 

 
    /* margin-top: -21.5%; -- remove this line */ 
 
    /* margin-right: 12px; -- remove this line */ 
 
}

<div class="paralelo"> 
 
    <p class="who">Servicios</p> 
 
</div>

here is jsfiddle so you can resize screen

01評論

這裏後

更新與vw這個例子，如果調整屏幕也將相應改變各種規模https://jsfiddle.net/5x7p6fsr/1/

來源

2017-04-17 18:02:18 caramba

嗨！感謝您花時間回答這個問題，現在的問題是文本不會與屏幕一起調整大小，無論使用vw，rem還是px，它都保持相同的大小，但它非常有用，非常感謝你：D –

@CarmenAmaro這真的很奇怪，因爲如果我用'vw'試試它就行了.. https://jsfiddle.net/5x7p6fsr/1/ :) – caramba

是的，也許是我的代碼上的一些額外的類，我會檢查它，再次謝謝你:) –

文本調整與CSS形狀

回答

相關問題