Как сделать так, чтобы абзац помещался внутри перекошенного родительского элемента div, не получая значения перекоса? [Дубликат]

Question

Как сделать так, чтобы абзац помещался внутри перекошенного родительского элемента div, не получая значения перекоса? [Дубликат]

0

Я пытаюсь создать это с помощью HTML/CSS... http://postimg.org/image/uhmhf04qz/

Теперь, сначала я попробовал..

    <div class='box'>
    <p>paragraph here</p>
    </div>

CSS:

    .box {
    background: red;
    width: 400px;
    height: 800px;
    margin: auto;
    transform: skewX(-20deg);
    }

Но это также относится ко второму элементу child, что делает его выглядящим довольно искаженным, я пытаюсь сделать абзац подходящим в границах родительского div, но без перекоса тоже. Есть ли способ сделать это в HTML/CSS?

Magdi Gamal 05 окт. 2013, в 01:00

Источник

1

Посмотрите этот ответ, который я написал несколько дней назад - stackoverflow.com/questions/19147241/skewed-borders-on-a-div/… .. Это полу-отзывчивый, и работает соответствующим образом хорошо ..
Josh Crozier 04 окт. 2013, в 22:18

Теги:

html

css

css3

1 ответ

Ещё вопросы

Посмотрите этот ответ, который я написал несколько дней назад - stackoverflow.com/questions/19147241/skewed-borders-on-a-div/… .. Это полу-отзывчивый, и работает соответствующим образом хорошо ..

benny · Answer 1 · 2013-10-04T20-33-00.000Z

Компенсировать отрицательное значение для положительного значения в p-элементе.

Jsfiddle: http://jsfiddle.net/u4NtT/4/

<div id='shape'>
    <p>paragraph here</p>
</div>

#shape {
    width: 450px;
    height: 350px;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -o-transform: skew(2d0eg);
    background: #333;
    margin:100px;
}
#shape p {
    font:1em normal Futura, sans-serif;
    color:#f1f1f1;
    padding:60px 60px;
    -webkit-transform: skew(-20deg) !important;
    -moz-transform: skew(-20deg) !important;
    -o-transform: skew(-20deg) !important;
    transform: skew(-20deg) !important;
}

Я хотел бы избежать! Важных в вашем CSS любой ценой. Кстати, попробуйте сделать контент длиннее, и вы увидите, что абзац не замечает границ продвинутого div.
@blake да, но это заставляет текст избегать родительских границ div.
Вы можете настроить это с отступом.
Вот гораздо большая форма с большим текстом абзаца. jsfiddle.net/u4NtT/5