html - (css) 图像上的对 Angular 线文本 (svg)

Question

我想在 svg 图像上有一个对 Angular 线的文本，例如 this

这是我到目前为止所得到的:

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 )

Answer 1

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 { 字体大小:8vw； } 没有像素，SVG 依赖于视口(viewport)宽度，字体也是如此
img { 宽度:100%； }，无位置，无边距，无需设置padding。
header height:100%; 或者不输入任何内容

Fiddle