2016-12-03 4 views
3

Я хочу иметь текст, который по диагонали на векторном изображении, как 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)

ответ

2

HTML

<link href="https://fonts.googleapis.com/css?family=Maven+Pro" rel="stylesheet"> 

<!-- Header --> 
<div class="header"> 
    <img src="http://bambusource.de/img/shape-header.svg" style="background:#91b4ce;margin:auto 5vw;width:90vw;height:auto" /> 
    <p>Text</p> 
</div> 

<!-- Outer --> 
<p> 
    Bla 
</p> 

CSS

.header { 
    position: relative; 
    background-color: #f5f7f8; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
} 

.header img { 
    width: 100%; 
} 

.header p { 
    font-family: 'Maven Pro', sans-serif; 
    font-weight: 700; 
    color: #91b4ce; 
    font-size: 8vw; 
    position: absolute; 
    right: 0; 
    top: 0; 
    padding: 0 1em; 
    margin: 1em; 
    -webkit-transform: rotate(16.75deg); 
    -moz-transform: rotate(16.75deg); 
    -ms-transform: rotate(16.75deg); 
    -o-transform: rotate(16.75deg); 
} 

Что исправить?
p { font-size: 8vw; } нет пикселей, то SVG зависит от ширины окна просмотра, так что делает шрифт
img { width:100%; }, ни положение, ни запас не обивка не должна быть установлена.
header height:100%; или типа ничего

Fiddle

+1

работает отлично! Большое спасибо :) –

+0

Np, ваш прием – Thielicious