有边角的两条线答案

【问题标题】：Two lines with edge corners有边角的两条线
【发布时间】：2016-03-15 15:17:32
【问题描述】：

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

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

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

我认为它不在中心。

【问题讨论】：

@Harry 是的，我做到了。我也在尝试解决我的问题。但是你解决了我的问题。非常感谢。

标签： html css css-shapes css-transforms

【解决方案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>

【讨论】：

你好，哈利。在codepen中查看。我是 CSS 新手。你能分享一支笔或jsfiddle吗？谢谢
你可以看看。不错，伙计。我很感谢您的帮助。
我是stack新手，不知道怎么正确使用。

【解决方案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);
}

【讨论】：