html - 带边 Angular 的两条线

Question

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

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>

---

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

• 从两个元素中删除了 float ，因为它们不是必需的。
• 为包装器添加了相对位置，并相对于它绝对定位了子元素。
• 在父级上添加了 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>