Dynamic Trapezoid to D3.js to display Dynamic information/proportion on hover

How would I proceed to design a trapezoid such that on hover the trapezoid splits to display proportions. Example on hover over the trapezoid, it splits into two sections inside, men, and women with the corresponding percentages of 55% and 45%. The space taken by both entities inside the trapezoid should match dynamically with the percentages. Is this possible with d3.js?