Как адаптивно резиново сверстать такой блок?

Question

[AbaGardon]

Как сверстать такой блок адаптивно ? Ie-9 + ? (интересует верхняя часть скосом).

<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()

Comments

[AbaGardon]

так и текст внутри блока преварачивается.

[Никита Егоров]

AbaGardon, переверните его обратно, задав ему тоже самое, но с минусом.

[AbaGardon]

Никита Егоров, как это исправить не подскажете ?

[Никита Егоров]

AbaGardon, margin-top: -5px
нужно подбирать, или посчитать относительно градуса, на который повернули.

[AbaGardon]

Никита Егоров, спасибо! !!! Все получилось. Не подскажете откуда можно такие примеры найти ?

[Никита Егоров]

AbaGardon, не совсем понял, каких примеров?

Answer 2

[alex-1917]

Автор, лови png-шку, не морочь мозги!
Вес всего 908 байт!
Старый PNG борозды не испортит!
PNG малыша ie6 не обидит!



https://yadi.sk/i/AQ4m6jcq2fN6TQ

Comments

[AbaGardon]

К счастью мне не нужно поддерживать ie 8