代码之家 › 专栏 › 技术社区 › Claudiu Creanga

全宽数学公式(相邻3个div)

skew css-transforms css3 css html

Claudiu Creanga · 技术社区 · 7 年前

.parent {
  height:500px;
  width:500px;
  position:relative;
  background:black;
}
.test {
  transform: skewX(20deg);
  width:33%;
  height:100%;
  position:absolute;
}
.a {
    background:purple;
    left:0;
}
.b {
  background:green;
  left:33%;

}
.c {
  background:orange;
  left:66%;
}

<div class="parent">
  <div class="test a">

  </div>
  <div class="test b">

  </div>
  <div class="test c">

  </div>
</div>

http://jsfiddle.net/jksqc1ux/7/

所有3个div都是相等的,那么它将是什么公式,这样它将填充100%的父级(这样您就不能再看到代码片段中的黑色部分)?父维度可以具有不同的值。

.a {left: calc(33% *0.4)} 或者类似的?

3 回复 | 直到 7 年前

Temani Afif 7 年前

首先,调整 transform origin to bottom left 使其更容易,然后您将获得下图中显示的结果。


   
    
     
      
       
      
     
     
     
     
      .parent{
宽度:500px;
背景:黑色;
变换:偏斜(20度);
变换原点:左下;
位置:绝对;
.a.一个{
左:0;
背景:绿色;

.c段{
左:calc(calc(2*100%/3)+calc(2*var(--x)/3));

</DIV>

<div class=“test c”>

</DIV>>=
用较少的代码获得类似效果的另一种方法是使用渐变:

.parent{
边距:自动;
线性梯度(70度,紫色0,紫色33%,绿色33%,绿色66%,橙色66%,橙色100%);




XXtan(deg) = X / heightX = height * tan(deg))在哪里degheight



我添加了一些不透明度,这样您可以看到所有元素都适合父容器的宽度:



.parent {
  height:500px;
  width:500px;
  margin:auto;
  position:relative;
  background:black;
}
.test {
  transform: skewX(20deg);
  --X:calc(0.364 * 500px); /*tan(20deg) ~ 0.364*/
  transform-origin:bottom left;
  width:calc(calc(100%/3) + calc(var(--X)/3));
  height:100%;
  position:absolute;
  opacity:0.8;
}
.a {
    background:purple;
    left:0;
}
.b {
  background:green;
  left:calc(calc(100%/3) + calc(var(--X)/3));

}
.c {
  background:orange;
  left:calc(calc(2*100%/3) + calc(2 * var(--X)/3));
}
<div class="parent">
  <div class="test a">

  </div>
  <div class="test b">

  </div>
  <div class="test c">

  </div>
</div>








.parent {
  height:500px;
  width:500px;
  margin:auto;
  position:relative;
  background:
  linear-gradient(70deg, purple 0,purple 33%, green 33%, green 66%,orange 66%,orange 100%);
}
<div class="parent">

</div>

Wayne Smith 7 年前

根据google的数据,44%的宽度 https://www.google.com/search?q=(33%25+%2B+sin(20

.parent {
  height:500px;
  width:500px;
  position:relative;
  background:green;
  overflow:hidden;
}

.parent::before {
  content:'';
  background:purple;
  height:500px;
  width:44%; /* (33% + sin(20 degrees)*33%) = 44% */ 
  transform: skewX(20deg);
  position:absolute;
  left:-18%;
}
.parent::after {
  content:'';
  height:500px;
  width:44%;
  transform: skewX(20deg);
  position:absolute;
  background:orange;
  right:-18%;
}

<div class="parent">


</div>

××× × ×××× 7 年前

试试看,它必须适合所有尺寸:(见小提琴: http://jsfiddle.net/jksqc1ux/85/

.parent {
  height:500px;
  width:500px;
  position:relative;
  background:black;
  overflow:hidden;
}
.test {
  transform: skewX(20deg);
  width:50%;
  height:100%;
  position:absolute;
}
.a {
    background:purple;
        right: 75%;
}
.b {
  background:green;
      right: 25%;

}
.c {
  background:orange;
      left: 75%;
}

<div class="parent">
  <div class="test a">

  </div>
  <div class="test b">

  </div>
  <div class="test c">

  </div>
</div>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前