Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

它不是唯一做奇怪事情的东西，平行四边形也因为偏斜而不适合它的包装。

Answer 1

实际上这条线对我来说是集中的。但我使用transform属性做了一个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*height*sin(skewDeg)/sin(90-skewDeg)移动0.5（height = 32px，因为底部向左移动）。在您的情况下，skewDeg = 20deg和6px，因此班次等于6px。

只需在右侧翻译一个额外的7.5px（以及另一个1.5 px以适应线条本身的宽度）。例如，取Yuri的答案并向其添加translateX(47px)以获取left: 47px;并将其更改为6px（因为我认为没有理由进行转换）应该完成这项工作。< / p>

编辑：要使平行四边形完全包含在包装中，首先将其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; }的边距和两个边框。

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

找到平行四边形的中间

2 个答案: