CSSシェイプでリサイズするテキスト

Question

平行四辺形の中にテキストがいくつかありますが、ウィンドウのサイズを変更するとテキストのプロパティがすべて失われ、vw、vh、em、pt、rem、pxを試しました @mediaの画面で試してみました。（最小幅：320px;） しかし、nothingsは動作しているようですが、現在のところこれは私がこれまで持っていたものです。

.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>

Answer 1

よう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

read more about how to use position here

01ここで

コメント

後

アップデートはvwとの一例であるあなたは、画面のサイズを変更する場合それはそれに応じてhttps://jsfiddle.net/5x7p6fsr/1/