Я хочу иметь текст, который по диагонали на векторном изображении, как this(CSS) диагональный текст на изображении (SVG)
Вот что у меня до сих пор:
HTML
<div class="header">
<img src="img/shape-header.svg" style="background:...;"/>
<p>Text</p>
</div>
CSS
.header {
position:relative;
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
}
.header img {
position:absolute;
}
.header p {
position:absolute;
right:0;top:0;
-webkit-transform: rotate(16.75deg);
-moz-transform: rotate(16.75deg);
-ms-transform: rotate(16.75deg);
-o-transform: rotate(16.75deg);
}
SVG
<svg viewBox="0 0 100 50">
<polygon
points="0,0 60,50 0,50"
style="fill:#f5f7f8"
id="polygon3" />
<polygon
points="0,0 100,0 100,30"
style="fill:#f5f7f8"
id="polygon5" />
<polygon
points="100,30 100,50 60,50"
style="fill:#f5f7f8"
id="polygon7" />
</svg>
Но когда масштабирование выходит из экрана или в реальное изображение
(fiddle)
работает отлично! Большое спасибо :) –
Np, ваш прием – Thielicious