Question

我想创建2个浮动div元素，占用浏览器窗口的50％。左侧div将具有浅绿色背景色。右边将有深绿色背景色。好吧，就像将每个div设置为50％宽度一样简单。

但是，我需要左边的div作为斜线结束。我附上了解释这个div应该是什么样子的图像。

我已经按照一些资源解释了如何创建具有不同几何形状的元素。看起来主要是关于设置边框的值（例如右边框）和制作透明的相应边框顶部/底部。

我面临的困难是关于Im使用百分比和像素的元素。这并没有给出好的结果。

这段代码：

 #div1 {
 text-decoration: none;
 color: white;
 font-weight: bold;
 display: inline-block;
 border-left: 30px solid transparent;
 border-bottom: 30px solid #24890d;
 height: 0;
 line-height: 50px;
 }

<div style="width: 100%;background-color: red">
<div style="float:left;width:50%;background-color:#58c333;padding-top: 11px">
aa
</div>
<div style="float:left;width:50%;background-color:#58c333;" id="div1">
bb
</div>
</div>

将使第二个div进入下一行。我不能设定一个特定的较低百分比。因为我不知道像素会是什么。有更简单的方法吗？

Answer 1

查看css calc（）函数，因为它可以帮助您完成此任务。例如：

.my-element {
    width: calc(50% - 1px);
}

Answer 2

30px边框添加到#div1的50％宽度以补偿额外的边框，您可以添加

<div style="float:left;width:calc(50% - 30px);background-color:#58c333;" id="div1">

Answer 3

这是你正在寻找的吗？通过将box-sizing: border-box;添加到＃div1，我将两个div保持在同一行，我还将第一个div的内联css从padding: 11px更改为padding: 12px。

＆＃13;

 #div1 {
   text-decoration: none;
   color: white;
   font-weight: bold;
   display: inline-block;
   border-left: 30px solid transparent;
   border-bottom: 30px solid #24890d;
   height: 0;
   line-height: 50px;
   box-sizing: border-box;
 }

＆＃13;

<div style="width: 100%;background-color: red">
  <div style="float:left;width:50%;background-color:#58c333;padding-top: 12px">
    aa
  </div>
  <div style="float:left;width:50%;background-color:#58c333;" id="div1">
    bb
  </div>
</div>

＆＃13;

Answer 4

不那么尖锐，您可以使用渐变，最终使用flexmodel绘制一条斜线并允许它通过多条线。

.oblique {
  display:flex;
  background:linear-gradient(to left, green 50%,tomato 50%)
}
.oblique:before {
  content:'';
  background:linear-gradient(to top left,  green 49%,tomato 51%);
  display:block;
  width:3em;
  order:1;
}
.oblique .first {
  order:0;
}
.oblique .first + div {
  order:2;
}

<div class="oblique">
  <div class="first"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  </div>
  <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. </p>
  </div>
</div>

Answer 5

box-sizing: border-box因此边框包含在宽度计算中

function randomArray(length, max) {
    return Array.apply(null, Array(length)).map(function() {
        return Math.round(Math.random() * max);
    });
}

randomArray = (length, max) => [...new Array(length)]
    .map(() => Math.round(Math.random() * max));

Css与斜线并排划分

5 个答案: