Finden der Mitte eines Parallelogramms

Question

Ich versuche, ein Etikett zu machen, dafür muss ich das Zentrum eines Parallelogramms finden, das ist mein Code, aber es ist definitiv nicht zentriert.

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>

Es ist nicht das einzige, was seltsame Dinge tun, auch das Parallelogramm der Verpackung wegen Skew doesnt passen.

Answer 1

Eigentlich scheint die Linie für mich zentralisiert. Aber ich habe einen workaroung mit der transform propertie:

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

Answer 2

Die Oberseite wird durch 0.5*height*sin(skewDeg)/sin(90-skewDeg) nach rechts verschoben (0.5 weil der Boden nach links verschoben wird). In Ihrem Fall, height = 32px und skewDeg = 20deg, so ist die Verschiebung gleich 6px.

Übersetzen Sie einfach eine zusätzliche 6px (und weitere 1,5 px, um für die Breite der Linie selbst zu berücksichtigen) auf der rechten Seite. Zum Beispiel, Yuri's Antwort zu nehmen und 7.5px hinzuzufügen, um translateX(47px) zu bekommen und es zu left: 47px; zu ändern (weil ich keinen Grund sehe, mich umzuwandeln) sollte die Arbeit machen.

Edit: Um das Parallelogramm zu bilden vollständig in der Verpackung enthalten sind, beginnen, indem es 6px nach rechts zu verschieben, damit es nicht von der linken Seite der Hülle vorsteht. Dann erhöhen Sie die Breite der Verpackung um 6px für die ursprüngliche Protrusion auf der rechten Seite, dann eine weitere 6px, da wir es nur nach rechts verschoben, und schließlich eine weitere 2px für die Grenzen.

Sie müssen auch die Höhe des Wrappers um 5px erhöhen, da Sie einen Rand von 3px und zwei Grenzen haben.

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