Question

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

我做了一些选秀，我认为我的选择正确。

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

您需要为transform-origin和.left元素指定.right，将其宽度更改为小于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);
}

带边角的两条线

2 个答案: