I recently received a layout to develop, in which I have a specific aside that I can not do, I need a div that is tilted, as in the example, the more that the text flows normally, the text is not turned over in case of using transform.
Anyone here has any tips, hint how to do?
Thank you
You can use the transform property with the skew value that is used to modify the angle of the elements.
Exemplifying:
.skew {
width: 10px;
height: 100px;
background: black;
-webkit-transform: skew(0deg); /* Chrome, Opera */
-ms-transform: skew(0deg); /* IE */
transform: skew(0deg); /* Padrão */
}
.positive {
-webkit-transform: skew(10deg); /* Chrome, Opera */
-ms-transform: skew(10deg); /* IE */
transform: skew(10deg); /* Padrão */
}
.negative {
-webkit-transform: skew(-10deg); /* Chrome, Opera */
-ms-transform: skew(-10deg); /* IE */
transform: skew(-10deg); /* Padrão */
}<span>0 DEG</span>
<div class="skew"></div>
<span>10 DEG</span>
<div class="skew positive"></div>
<span>-10 DEG</span>
<div class="skew negative"></div> OBS: You can see an article with a more detailed explanation of all property values transform here.
In your case, you can make a positive slope in a DIV , and your child images will receive the skew effect, and make use of a paragraph by applying SKEW in reverse so that the text is displayed in the normal way.
Exemplifying:
.skew {
width: 810px;
margin: 0 auto;
overflow: hidden;
background-color: #F26544;
-webkit-transform: skew(30deg);
-ms-transform: skew(30deg);
transform: skew(30deg); /* SKEW da div*/
}
.skew img {
width: 150px;
height: 150px;
margin-right: 25px;
float: left;
}
.p-skew {
padding: 10px;
-webkit-transform: skew(-30deg);
-ms-transform: skew(-30deg);
transform: skew(-30deg); /* SKEW inverso para o texto não inclinar */
}<div class="skew">
<img src="http://aprenderabrincar.com/wp-content/uploads/2014/05/bebe-ojos-cafes.jpg"alt="Sem Imagem">
<p class="p-skew">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique aspernatur esse accusantium non ullam suscipit autem ipsum totam labore voluptatibus architecto unde impedit, error quas mollitia cumque animi, cum eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique aspernatur esse accusantium non ullam suscipit autem ipsum totam labore.</p>
</div> Another way, in addition to those already presented and explained, also using the skew property but applying the transformation only to two elements (one before and another after the image), instead of transforming the entire div , thus keeping the aspect of the image:
Intheexample,twoelements(beforeandaftertheimage)withbackgrounddifferentcolors.
span):*{margin:0;padding:0}
.image-wrapper {
height: 200px;
overflow: hidden;
position: relative;
width: 300px
}
.image-wrapper > img {
width: 100%
}
.cut {
background: #fff; /* A cor dos elementos antes e depois */
display: block;
top: 0; bottom: 0;
position: absolute;
width: 100px
}
.left {
-webkit-transform: skew(16deg) translateX(-70px);
-ms-transform: skew(16deg) translateX(-70px);
transform: skew(16deg) translateX(-70px);
left: 0
}
.right {
-webkit-transform: skew(16deg) translateX(70px);
-ms-transform: skew(16deg) translateX(70px);
transform: skew(16deg) translateX(70px);
right: 0
}<div class='image-wrapper'>
<span class='cut left'></span>
<img src='http://i.stack.imgur.com/yMfhN.jpg' alt='Chá de Bebê'/>
<span class='cut right'></span>
</div>Use CSS3 Transform: Skew ADJUST YOUR NEED.
#square {
-ms-transform: skew(30deg); /* IE 9 */
-webkit-transform: skew(30deg); /* Chrome, Safari, Opera */
transform: skew(30deg); /* Standard syntax */
transform-origin: bottom left; /* Prevent the bottom from shifting */
}
Example: link