Wie erstelle ich ein Parallelogramm mit CSS, aber ohne Transformationen

Question

Ich habe das, bis jetzt möchte ich die Dreiecke und das Rechteck zusammensetzen, um ein Parallelogramm zu erhalten. Irgendwelche Ideen?

https://jsfiddle.net/pu17bbfo/

Ich kann nicht Transformationen verwenden, da diese wkhtmltopdf Targeting ist und es nicht unterstützt.

Code:

<div style="display: block; "> 
<div style="width: 0; 
height: 0; 
border-style: solid; 
border-width: 0 0 72px 40px; 
border-color: transparent transparent #f17522 transparent; display: inline-block;"> 
</div> 
<div style="height: 72px; background-color: #f17522; display: inline-block;"> 
<p style="color: #fff">Talking Points Name</p> 
</div> 
<div style="width: 0; 
height: 0; 
border-style: solid; 
border-width: 72px 40px 0 0; 
border-color: #f17522 transparent transparent transparent; display: inline-block;"> 
</div> 
</div> 

Answer 1

Standardmäßig haben die inline-block Elemente vertical-align: baseline. Sie können oder bottom dort verwenden und sie werden vertikal ausgerichtet. Entfernen Sie dann entweder den Leerraum zwischen den Elementen, um die Lücke zu entfernen, oder fügen Sie einen HTML-Kommentar ein, der den auf der Seite angezeigten Leerraum entfernt.

.headline { 
 
    height: 72px; 
 
    color: #fff !important; 
 
    background-color: #f17522; 
 
    white-space: nowrap !important; 
 
} 
 

 
div { 
 
    vertical-align: bottom; 
 
}

<div style="display: block; "> 
 
    <div style="width: 0; 
 
height: 0; 
 
border-style: solid; 
 
border-width: 0 0 72px 40px; 
 
border-color: transparent transparent #f17522 transparent; display: inline-block;"> 
 
    </div><!-- 
 
--><div style="height: 72px; background-color: #f17522; display: inline-block;"> 
 
    <p style="color: #fff">Talking Points Name</p> 
 
    </div><!-- 
 
--><div style="width: 0; 
 
height: 0; 
 
border-style: solid; 
 
border-width: 72px 40px 0 0; 
 
border-color: #f17522 transparent transparent transparent; display: inline-block;"> 
 
    </div> 
 
</div>

Answer 2

Verwenden absolute Position in den divs.