Косые свойства, применяемые к абзацу

Я использую перекос, но преобразование также применяется ко всему содержимому внутри перекоса, как вы можете видеть в моем ручке. Параграф выглядит курсивом. http://codepen.io/Sidney-Dev/pen/RGXVpb Косые свойства, применяемые к абзацу

.services { 
 
    display: flex; 
 
    overflow: hidden; 
 
} 
 
.left { 
 
    background-color: black; 
 
    height: 250px; 
 
    width: 60%; 
 
    margin-left: -50px; 
 
} 
 
.right { 
 
    background-color: green; 
 
    width: 50%; 
 
    margin-right: -500px 
 
} 
 
.skew { 
 
    transform: skew(-15deg); 
 
} 
 
p { 
 
    color: white; 
 
}

<section class="services"> 
 
    <div class="left skew"> 
 
    <div class="inner-container"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro praesentium deserunt fugiat, qui est delectus vel eligendi totam quidem amet laudantium harum, saepe voluptates voluptatibus. Aliquam ea, totam nulla magni.</p> 
 
    </div> 
 
    </div> 
 
    <div class="right skew"> 
 
    </div> 
 
</section>

Как я могу наклонить окно, не влияя на содержание внутри?

Надеется, что вы можете помочь

источник

2016-11-01 Ragmah

Это может быть сделано без использования 'skew'. Используйте 'linear-gradient' для родителя. [** Fiddle **] (https://jsfiddle.net/9Lesw5tk/) –

Мне действительно нравится идея линейного градиента. Но я вижу, что абзац переполняется, если я масштабирую окно вниз. Итак, как я могу сохранить абзац внутри черного контейнера все время в этом случае? – Ragmah

также .. Я видел линию, которая отделяет коробки (одна в середине), не выглядит прямой ... вместо этого она выглядит зубчатой. – Ragmah

Вы искажены -15deg. Просто добавьте 15deg к вашему .inner-container так:

.skew .inner-container { 
    transform: skew(15deg); 
}

к "unskew" только внутреннее содержание.

.services { 
 
    display: flex; 
 
    overflow: hidden; 
 
} 
 
.left { 
 
    background-color: black; 
 
    height: 250px; 
 
    width: 60%; 
 
    margin-left: -50px; 
 
} 
 
.right { 
 
    background-color: green; 
 
    width: 50%; 
 
    margin-right: -500px 
 
} 
 
.skew { 
 
    transform: skew(-15deg); 
 
} 
 
.skew .inner-container { 
 
    transform: skew(15deg); 
 
} 
 
p { 
 
    color: white; 
 
}

<section class="services"> 
 
    <div class="left skew"> 
 
    <div class="inner-container"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro praesentium deserunt fugiat, qui est delectus vel eligendi totam quidem amet laudantium harum, saepe voluptates voluptatibus. Aliquam ea, totam nulla magni.</p> 
 
    </div> 
 
    </div> 
 
    <div class="right skew"> 
 
    </div> 
 
</section>

источник

2016-11-01 08:49:28 andreas

Цените ответ, сопровождаемый объяснением. – Ragmah

Спасибо, рад, что смогу помочь. – andreas

Надеюсь, что вы не возражаете, глядя на ответ @Muhammad Usman 17 https://jsfiddle.net/9Lesw5tk/ Линия посередине (между черным ящиком и зеленым) выглядит немного зубчатой. Я использовал фрагмент, который вы отправили, но он также делает то же самое – Ragmah

Добавить skew(15deg) в р теге

.services{ 
 
    display: flex; 
 
    overflow:hidden; 
 
} 
 
.left{ 
 
    background-color: black; 
 
    height: 250px; 
 
    width: 60%; 
 
    margin-left: -50px; 
 
} 
 
.right{ 
 
    background-color: green; 
 
    width: 50%; 
 
    margin-right: -500px 
 
} 
 

 
.skew{ 
 
    transform: skew(-15deg); 
 
} 
 

 
p{ 
 
    color: white; 
 
    transform: skew(15deg); 
 
}

<section class="services"> 
 
<div class="left skew"> 
 
    <div class="inner-container"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro praesentium deserunt fugiat, qui est delectus vel eligendi totam quidem amet laudantium harum, saepe voluptates voluptatibus. Aliquam ea, totam nulla magni.</p> 
 
    </div> 
 
</div> 
 
<div class="right skew">  
 
</div> 
 
</section>

источник

2016-11-01 08:50:21

Как я добавил в комментариях к другим ответам. Наклонная линия выглядит немного зазубренной ... Как я могу обойти это? – Ragmah

Косые свойства, применяемые к абзацу

ответ

Смежные вопросы