文本调整与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形状

回答

相关问题