CSS对角线用文本旋转

Question

我的网站上有一条对角线，其中一些文本中间，我想根据对角线的方式旋转文本。问题是该行响应迅速，当我放置固定旋转（）函数时，它仅适用于一个分辨率

这样：

rotate(-11deg) on 324x564 resolution

324x564

rotate(-11deg) on 980x564 resolution

980x564

在第一个图像上旋转效果很好，但在第二张图像上，没有。我怎样才能解决这个问题 ？除了对所有不同分辨率进行媒体查询

分隔线html代码：

<div class="divider1">
    <h2>TEST</h2>
</div>

分隔线CSS代码：

    .divider {
    color: #fff;
    margin-top: 100px;
    padding: 0 0;
    position: relative;
    background: rgba(255, 255, 255, 0.7);
}
.divider1 {
    color: #fff;
    margin-top: 0;
    padding: 0 0;
    position: relative;
    background: rgba(255, 255, 255, 0.7);
}
.divider1 h2 {
    z-index: 0;
    text-align: center;
    color: black;
    font-size: 4rem;
    rotate(-11deg);
}

.divider1:before {
    position: absolute;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
    margin-top: -70px;
    content: '';
    border-style: solid;
    border-width: 0 0 7rem 100vw;
    border-color: transparent rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.7) transparent;
}
.divider1:after {
    position: absolute;
    margin-top: 0px;
    content: '';
    border-style: solid;
    border-width: 0 0 7rem 100vw;
    border-color: transparent rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.7) transparent;
    -moz-transform: scale(1, -1);
    -webkit-transform: scale(1, -1);
    -o-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
    transform: scale(1, -1);
}

Answer 1

在设置设置时，三角形很可能会根据显示器的不同长宽比而扭曲，而旋转在它们的旋转量保持恒定的同时。您可能必须在背景CSS中应用一些视口或媒体查询来弥补这一点。

Answer 2

您可以通过在旋转元件中添加白色背景来做出不同的操作，以便旋转始终匹配对角线线，并以相同角度在主容器上使用梯度：

.divider {
  min-height: 100vh;
  background: linear-gradient(-11deg, red 50%, blue 0);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
h2 {
  margin: 0 -50px;
  padding: 40px 0;
  background: #fff;
  text-align: center;
  transform: rotate(-11deg);
}
body {
  margin: 0;
}

<div class="divider">
  <h2>Text</h2>
</div>

您也可以在梯度内移动白色颜色：

.divider {
  min-height: 100vh;
  background: linear-gradient(-11deg, 
    red calc(50% - 42px),#fff calc(50% - 40px), 
    #fff calc(50% + 40px),blue calc(50% + 42px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
h2 {
  margin: 0 -50px;
  padding: 40px 0;
  text-align: center;
  transform: rotate(-11deg);
}
body {
  margin: 0;
}

<div class="divider">
  <h2>Text</h2>
</div>