Question

我希望在this

等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 ）

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 { font-size: 8vw; }没有像素，SVG依赖于视口宽度，字体
也是如此 img { width:100%; }，没有位置，没有边距不需要设置填充。
header height:100%;或不输入任何内容

Fiddle

（css）图像上的对角线文字（svg）

1 个答案: