html – 带边角的两条线

概述我需要一些帮助.我想用边角做两条线,但我遇到了问题.最终结果将是这样的： Final result 我做了一些选秀,我认为我的选择正确. HTML： <div class="left"></div><div class="right"></div> CSS： .left { width: 48%; padding-top: 2rem; position: absolute; ri 我需要一些帮助.我想用边角做两条线,但我遇到了问题.最终结果将是这样的：

Final result

我做了一些选秀,我认为我的选择正确.

HTML：

<div ></div><div ></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

我认为它不在中心.

解决方法 您需要为.left和.right元素指定transform-origin,将其宽度更改为小于50％(边框宽度的一半).

transform-origin属性指定转换应发生的点或轴.这里.left元素应该倾斜,使得它的右下角保持固定,而右边的元素应该倾斜,使得它的左下角保持固定.因此,我们将这些值赋给transform-origin属性.

对于宽度,当我们给出50％作为值然后再添加边框时,元素的实际宽度变得超过50％(它变为50％0.2rem),因为border通常不是元素宽度的一部分.您可以通过修改元素的Box-sizing属性或通过减小宽度来更改此设置.在这里,我们只减少边框宽度的一半,因为边框应该重叠.

.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 >  <div ></div>  <div ></div></div>

下面是一个稍微调整一下的版本,可以产生相同的输出.以下是完成的调整：

>从两个元素中删除浮动,因为它们不是必需的.
>添加了相对于它的包装器和定位的子元素的相对位置.
>添加溢出：隐藏在父级上以防止出现水平滚动条.
>无效的左右边缘,以确保线从一端到另一端.

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 >  <div ></div>  <div ></div></div>

总结

以上是内存溢出为你收集整理的html – 带边角的两条线全部内容，希望文章能够帮你解决html – 带边角的两条线所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。