Two lines with corner angles

Question

I need help. I would like to make two lines with edge angles, but I have a problem. The final result will be like this:

Final result

I made some drafts, and I think I'm right.

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);
}

You can see the same code on codepen.io. Follow the link

I think this is not the center.

Answer 1

You need to specify transform-originfor the elements .leftand .rightso that their width is less than 50% (half the width of the border).

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>

Hide result

---

​​ , . , :

• , .
• ​​ .
• 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>

Hide result

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);
}