How to adaptively rubber-stamp such a block?

Question

Layout

How to layout such a block adaptively? Ie-9 + ? (interested in the upper part of the bevel).

<div class="plan__items">
                        <div class="plan__block-header">
                            <div class="plan__title">Ultimates</div>
                            <div class="plan__price">
                                <sup>&#36;</sup> 99 <span>per month</span>
                            </div>
                        </div>
                        <div class="plan__block-body">
                            <ul class="plan__block-list">
                                <li class="plan__block-list-item">30 Free Trail</li>
                                <li class="plan__block-list-item">5 Free Projects</li>
                                <li class="plan__block-list-item">PHP 5 Enabled</li>
                                <li class="plan__block-list-item">24/7 Suports</li>
                            </ul>
                        </div>
                        <div class="plan__block-footer">
                            <button class="plan__button">Order now</button>
                        </div>
                    </div>

Answer 1

transform: skew()

Answer 2

Author, catch a png-shku, do not fool your brains!
The weight is only 908 bytes!
The old PNG will not spoil the furrow!
PNG baby ie6 will not offend!
https://yadi.sk/i/AQ4m6jcq2fN6TQ