带边角的两条线

Question

我需要一些帮助。我想用边角做两条线，但我遇到了问题。最终结果将是这样的：

Final result

我做了一些草稿，我认为我的方法是正确的。

HTML:

<div class="left"></div>
<div class="right"></div>

CSS:

.left {
  width: 48%;
  padding-top: 2rem;
  position: absolute;
  right: -100%;
  float: left;
  left:0;
  transform: skewX(25deg);
  border-top: 0.2rem solid; 
  border-right: 0.2rem solid;
}

.right {
  width: 50%;
  padding-top: 2rem;
  float: right;
  position: relative;
  right:0;
  border-top: 0.2rem solid;
  border-left: 0.2rem solid;
  transform: skewX(-25deg);
}

您可以在 codepen.io 上看到相同的代码。关注link

我认为它不在中心。

Answer 1

您需要为 .left 和 .right 元素指定 transform-origin，将它们的宽度更改为小于 50%（边框宽度的一半）。

transform-origin 属性指定了发生变换的点或轴。这里 .left 元素应该倾斜，使其右下角保持固定，.right 元素应该倾斜，使其左下角保持固定。因此，我们将这些值赋予 transform-origin 属性.

对于width，当我们给50%作为值，然后再给它加上一个border，元素的实际宽度就变成了50%以上（变为50 % + 0.2rem) 因为边框通常不是元素宽度的一部分。您可以通过修改元素的 box-sizing 属性或减少 width 来更改此设置。在这里，我们只将其减少边框宽度的一半，因为边框应该重叠。

.left {
  width: calc(50% - 0.1rem); /* change this */
  /* other properties from your code */
  transform: skewX(25deg);
  transform-origin: bottom right; /* add this */
}

.right {
  width: calc(50% - 0.1rem); /* change this */
  /* other properties from your code */
  transform-origin: bottom left; /* add this */
  transform: skewX(-25deg);
}

body {
  font-family: "Open Sans";
  font-size: 1.125rem;
  line-height: 1.618em;
  color: #454545;
}

.left {
  width: calc(50% - 0.1rem);
  padding-top: 2rem;
  position: absolute;
  right: -100%;
  float: left;
  left:0;
  transform: skewX(25deg);
  transform-origin: bottom right;
  border-top: 0.2rem solid; 
  border-right: 0.2rem solid;
}

.right {
  width: calc(50% - 0.1rem);
  padding-top: 2rem;
  float: right;
  position: relative;
  right:0;
  border-top: 0.2rem solid;
  border-left: 0.2rem solid;
  transform: skewX(-25deg);
  transform-origin: bottom left;
}

<div class="wrapper">
  <div class="left"></div>
  <div class="right"></div>
</div>

下面是一个稍微调整的版本，它产生相同的输出。以下是已完成的调整：

从两个元素中删除了浮点数，因为它们不是必需的。
为包装器添加相对位置并相对于它绝对定位子元素。
在父项上添加了 overflow: hidden 以防止出现水平滚动条。
取消 body 的左右边距以确保线条从一端延伸到另一端。

body {
  font-family: "Open Sans";
  font-size: 1.125rem;
  line-height: 1.618em;
  color: #454545;
  margin-left: 0;
  margin-right: 0;
}
.wrapper{
  position: relative;
  width: 100%;
  height: 2rem;
  overflow: hidden;
}
.left {
  position: absolute;
  left:0;
  width: 50%;
  height: 100%;
  border-top: 0.2rem solid; 
  border-right: 0.2rem solid;
  transform: skewX(25deg);
  transform-origin: bottom right;
}

.right {
  position: absolute;
  right:0;
  width: 50%;
  height: 100%;
  border-top: 0.2rem solid;
  border-left: 0.2rem solid;
  transform: skewX(-25deg);
  transform-origin: bottom left;
}

<div class="wrapper">
  <div class="left"></div>
  <div class="right"></div>
</div>

Answer 2

试试这个：

.left {
  width: 48.5%;
  padding-bottom: 5rem;
  position: absolute;
  right: -100%;
  float: left;
  left:0;
  transform: skewX(25deg);
  border-top: 0.2rem solid; 
  border-right: 0.2rem solid;
}

.right {
  width: 48.5%;
  padding-bottom: 5rem;
  float: right;
  position: relative;
  right:0;
  border-top: 0.2rem solid;
  border-left: 0.2rem solid;
  transform: skewX(-25deg);
}

带边角的两条线

Two lines with edge corners

html

css

css-transforms

css-shapes