平行四辺形の中央を見つける

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>

それは平行四辺形のためにもスキューのそのラッパーに合わせdoesntの、奇妙なものをやって唯一のものではありません。

Answer 1

実際に私のためにラインが中央に見えます。 （底は左にシフトしているので0.5）

.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)だけ右にシフトされています。しかし、私はtransform propertieを使用してworkaroungを作りました。あなたのケースでは、height = 32pxとskewDeg = 20degなので、シフトは6pxになります。

さらに、6px（行自体の幅に合わせて1.5px）を右に翻訳するだけです。たとえば、Yuriの答えをとり、7.5pxを追加してtranslateX(47px)とし、それをleft: 47px;に変更する（変換する理由がないので）ジョブを実行する必要があります。

編集：は、完全にラッパーに含まれる平行四辺形を作る6pxそれはラッパーの左側から突出しないように、右にシフトすることにより開始します。次に、右に元の突起の場合はラッパーの幅を6px、次に右に移動した後にもう一度6px、最後に別の2pxとします。

また、3pxの余白と2つの罫線があるため、ラッパーの高さを5pxで増やす必要があります。

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