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

您可以通过向旋转的元素添加白色背景来不同地执行此操作，以使旋转始终与对角线匹配，并在主容器上也使用相同角度的渐变：

SELECT "Date", "Owner",

(SELECT sum("Hours")
   FROM timesheets
  WHERE "Status" = 'Billable' AND "Date" between '2019-01-01' AND '2019-02-20'
) AS "Billable",

(SELECT sum("Hours")
   FROM timesheets
  WHERE "Status" = 'Non Billable' AND "Date" between '2019-01-01' AND '2019-02-20'
) AS "Non Billable"

 FROM timesheets
WHERE "Date" between '2019-01-01' AND '2019-02-20'
GROUP BY "Date", "Owner"
ORDER BY "Date", "Owner"

.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;
}

CSS对角线随文本旋转

2 个答案: