如何在 diff 中将 2 div 的倾斜线性渐变的末端对齐一个低于另一个。解析度

Question

我正在尝试将顶部线性渐变的末端与其下方的线性渐变的起点对齐。参考 fiddle https://jsfiddle.net/poqfa2kg/

这里我想将顶部（绿色）的末端与底部（红色）的开始对齐以获得任何分辨率，目前如果我更改浏览器宽度（调整大小）它会中断。有没有办法实现这个

CSS

.top{
  height: 40px;
  width: 100%;
  background: linear-gradient(78deg, red 50%, transparent 1%); 
}


.bottom{
  height: 40px;
  width: 100%;
  background: linear-gradient(78deg, green 52%, transparent 1%); 
}

HTML


<div class='top'>
  TOP
</div>

<div class='bottom'>
  BOTTOM
</div>

对于任何屏幕宽度都应该是这样的

Answer 1

问题是几何问题。虽然某些尺寸是相对声明的（% 距离和宽度），但元素的高度是以像素为单位声明的。

例如，当视口扩展时，高度保持固定但其他内容扩展。

你必须根据你想要的 div 的角度和高度做一些计算，但这个片段（我承认我只是尝试而不是完成计算）有效并且高度是根据 vw 单位定义的。

.top{
  height: 4.5vw;
  width: 100%;
  background: linear-gradient(78deg, red 50%, transparent 50%,  transparent); 
}


.bottom{
  height: 4.5vw;
  width: 100%;
  background: linear-gradient(78deg, green 51%,transparent 51%, transparent); 
}

<div class='top'>
  TOP
</div>

<div class='bottom'>
  BOTTOM
</div>

Answer 2

因为你的身高是固定的，所以保持相同的梯度并做一些计算以添加第一个梯度的偏移量：

.top{
  height: 40px;
  background: linear-gradient(78deg, red 50%, transparent 0) -8.5px 0 no-repeat; 
  /* 8.5px = 40px / tan(78deg) */
}


.bottom{
  height: 40px;
  background: linear-gradient(78deg, green 50%, transparent 0); 
}

<div class='top'>
  TOP
</div>

<div class='bottom'>
  BOTTOM
</div>

或者使用倾斜变换以不同的方式进行，您无需进行任何计算，它适用于任何高度和角度

[class] {
  position:relative;
  z-index:0;
  overflow:hidden;
}
[class]::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:-20%;
  right:50%;
  bottom:0;
  transform:skewX(10deg); /* any angle here */
}

.top{
  height: 60px;
}
.top::before {
  background:red;
  transform-origin:bottom; /* bottom here */
}

.bottom{
  height: 40px;
}

.bottom::before {
  background:green;
  transform-origin:top; /* top here */
}

<div class='top'>
  TOP
</div>

<div class='bottom'>
  BOTTOM
</div>

如何在 diff 中将 2 div 的倾斜线性渐变的末端对齐一个低于另一个。解析度

How to align the ends of angled linear gradiant of 2 div one below other in diff. resolution

html

css

responsive-design

linear-gradients