css对角线旋转文本

Question

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

像这样：

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>