查找平行四边形的中间部分

Question

我想制作一个标签，因此我需要找到平行四边形的中心，这是我的代码，但它绝对不是居中。

JSFiddle

.wrapper { 
 
    background: red; 
 
    width: 82px; 
 
    height: 32px; 
 
    position: relative; 
 
} 
 

 
.paralellogram { 
 
    width: 82px; 
 
    height: 32px; 
 
    margin-top: 3px; 
 
    -webkit-transform: skew(-20deg); 
 
    -moz-transform: skew(-20deg); 
 
    -o-transform: skew(-20deg); 
 
    border: 1px solid #17B3E6; 
 
    background: yellow; 
 
    position: absolute; 
 
} 
 

 
.line { 
 
    width: 3px; 
 
    height: 100%; 
 
    background: purple; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0 auto; 
 
}

<div class="wrapper"> 
 
    <div class="paralellogram"></div> 
 
    <div class="line"></div> 
 
</div>

这不是做奇怪的东西的唯一的事情，平行四边形也犯规适合，因为歪斜的包装中。

Answer 1

其实这条线看起来集中了我。但是我做了使用transform propertie一个workaroung：

.line{ 
    width:3px; 
    height:100%; 
    background:purple; 
    position:absolute; 
    left:0;right:0; 
    transform: translateX(39.5px); //(82px -3px)/2 
} 

Answer 2

（因为底部向左偏移0.5）的顶侧由0.5*height*sin(skewDeg)/sin(90-skewDeg)右移。在你的情况下，height = 32px和skewDeg = 20deg，所以移位等于6px。

简单地翻译一下额外的6px（和另一个1.5像素来适应线条本身的宽度）。例如，考虑尤里的回答并添加7.5px来获得translateX(47px)并将其更改为left: 47px;（因为我看不出有任何改变的理由）应该完成这项工作。

编辑：要使完全包含在包装的平行四边形，由它移位到6px所以它不会从包装的左侧突出右侧开始。然后增加包装的宽度为6px为原始突出在右侧，然后另一个6px因为我们只是将它移到右边，最后是另一个2px的边界。

您还需要将包装的高度增加5px，因为您的边距为3px和两个边框。

.wrapper { 
 
    background: red; 
 
    width: 96px; 
 
    height: 37px; 
 
    position: relative; 
 
} 
 

 
.paralellogram { 
 
    width: 82px; 
 
    height: 32px; 
 
    margin-top: 3px; 
 
    -webkit-transform: skew(-20deg); 
 
    -moz-transform: skew(-20deg); 
 
    -o-transform: skew(-20deg); 
 
    border: 1px solid #17B3E6; 
 
    background: yellow; 
 
    position: absolute; 
 
    left: 6px; 
 
} 
 

 
.line{ 
 
    width:3px; 
 
    height:100%; 
 
    background:purple; 
 
    position:absolute; 
 
    left:53px;right:0; 
 
}

<div class="wrapper"> 
 
    <div class="paralellogram"></div> 
 
    <div class="line"></div> 
 
</div>