Unskewed Child Not Aligning

Unskewed child not aligning

The behaviour of the "unskewed" child is normal, it is the way skew works. In order to understand this, I am going to simplify the question to :

why isn't skewX(40deg) the same as skewX(20deg) skewX(20deg)?

div {    width: 100px; height: 100px;    position:absolute;    top:20px; left:20px;    transform-origin: 0 0;}.d1 {    transform: skewX(40deg);    background: red;    opacity:0.7;}.d2 {    transform: skewX(20deg) skewX(20deg);    background: blue;    opacity:0.7;}/** FOR THE DEMO **/body {background: url('http://i.stack.imgur.com/GySvQ.png');background-size: 10px;}.m {text-align:right;padding-top:105px;}.m1{width:83px;color:red;border-right:1px solid red;}.m2 {width:72px;color:blue;border-right:1px solid blue;}p{margin:0 0 5px 150px;color:red;}.b{color:blue;}

<div class="d1"></div><div class="d2"></div><div class="m m1">x = 83</div><div class="m m2"><br/>x = 72</div><p class="r">skewX(40deg)</p><p class="b">skewX(20deg) skewX(20deg)</p>

CSS3 Skew Again! : Unskew text without parent div so form focus state is proper

The easy solution would be a background image.

CSS gradient can fake this.

background-image:linear-gradient(45deg,  #62cad9 0 , #62cad9 2em , transparent 2em ,transparent 230px, #62cad9 230px );

Try it without transform. http://jsfiddle.net/khGDj/
other easy way, would have been width pseudo-element and borders/blue/transparent. input do not take it as far as i know.

Slant the top of a div using css without skewing text

Skew the box one way, and its contents the other:

<aside class="skew-neg">
    <div class="skew-pos">
        <p>Hello World.</p>
        <p>@jonathansampson.</p>
        <p>This box is skewed.</p>
        <p>In supported browsers.</p>
    </div>
</aside>

/* Skew the container one way */
.skew-neg {
    -webkit-transform: skewY(-5deg);
    -moz-transform: skewY(-5deg);
    -ms-transform: skewY(-5deg);
    -o-transform: skewY(-5deg);
    transform: skewY(-5deg);
}

/* And the child another way */
.skew-pos {
    -webkit-transform: skewY(5deg);
    -moz-transform: skewY(5deg);
    -ms-transform: skewY(5deg);
    -o-transform: skewY(5deg);
    transform: skewY(5deg);
}

Which results in something similar to the following:

Demo: http://jsfiddle.net/Q7dKT/191/

CSS: Skew a buttons border, not the text

You can unskew the child element i.e. provide the opposite skew co-ordinates as you specified for the parent.

Here is a working example

Suppose you have below as you html,

<div class="btn">
    <button><div class="btn-text">Click</div></button>
</div>

If we skew the parent element by 20deg then we should skew the child element by -20deg as,

.btn {
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
}
.btn-text {
    -ms-transform: skewX(-20deg); /* IE 9 */
    -webkit-transform: skewX(-20deg); /* Safari */
    transform: skewX(-20deg);
    padding: 20px;
}

box with skew and background image

I was able to manage it using the method I spoke before in comment.
Basically, I used ::before pseudo-elements to put the background image and then unskewed them.

Check it out:

/* +++++++++++++++ NEW INFORMATION ++++++++++++++ */
.accordion ul li::before {  content: "";  transform: skewX(20deg);  -ms-transform: skewX(20deg);  -webkit-transform: skewX(20deg);  background-image: url(http://michael-ferry.com/assets/accordion3.jpg);  background-repeat: no-repeat;  background-position: top left;  position: absolute;  transform: translateX(-50%) skewX(20deg);  -webkit-transform-origin: top left;  -ms-transform-origin: top left;  transform-origin: top left;  width: 200%;  height: 100%;}
/* +++++++++++++++++++++++++++++++++++++++++++++ */
.accordion {  width: 100%;  height: 300px;  overflow: hidden;  max-width: 100%;  margin: 50px auto;  background-color: #FFAE00;}
.accordion ul {  width: 90%;  display: table;  table-layout: fixed;  margin: 0;  padding: 0;  margin-left: 5%;  height: 100%;}
.accordion ul li {  display: table-cell;  vertical-align: bottom;  position: relative;  margin-left: 0;  margin-right: 0;  width: 25%;  height: 250px;  background-repeat: no-repeat;  background-position: center center;  transition: all 500ms ease;  float: none;  transform: skewX(-20deg);  overflow: hidden;}
.accordion ul li div {  display: block;  overflow: hidden;  width: 100%;}
.accordion ul li div a {  display: block;  height: 300px;  width: 37vw;  position: relative;  z-index: 0;  vertical-align: bottom;  padding: 55px 45px;  box-sizing: border-box;  color: #fff;  margin-left: -53px;  text-decoration: none;  transform: skewX(20deg);  font-family: Open Sans, sans-serif;  transition: all 200ms ease;}
.accordion ul li div a * {  opacity: 0;  margin: 0;  width: 100%;  text-overflow: ellipsis;  position: relative;  z-index: 0;  white-space: nowrap;  overflow: hidden;  -webkit-transform: translateX(-20px);  transform: translateX(-20px);  -webkit-transition: all 0.4s ease;  transition: all 0.4s ease;}
.accordion ul li div a h2 {  font-family: Montserrat, sans-serif;  text-overflow: clip;  font-size: 24px;  text-transform: uppercase;  text-align: left;  border-bottom: unset;  margin-bottom: 2px;  top: 165px;}
.accordion ul li div a p {  top: 165px;  font-size: 13.5px;  font-weight: 100;  margin-left: 0;  height: auto;}
.accordion ul:hover li:hover {  width: 50%;}
.accordion ul:hover li:hover a {  background: rgba(0, 0, 0, 0.4);}
.accordion ul:hover li:hover a * {  opacity: 1;  transform: none;}

<div class="accordion">  <ul>    <li>      <div>        <a href="#">          <h2>Lorem Ipsum</h2>          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>        </a>      </div>    </li>    <li>      <div>        <a href="#">          <h2>Lorem Ipsum</h2>          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>        </a>      </div>    </li>    <li>      <div>        <a href="#">          <h2>Lorem Ipsum</h2>          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>        </a>      </div>    </li>    <li>      <div>        <a href="#">          <h2>Lorem Ipsum</h2>          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>        </a>      </div>    </li>  </ul></div>

Skew one side only of an element

See Snippet

#parallelogram-container {  margin: 0 50px;}
.parallelogram {  position: relative;  background: #008dd0;  width: 100px;  border: none;  display: inline-block;  height: 90px;  padding: 0px;  margin: 0 1px;}
.parallelogram:nth-child(1) {}
.parallelogram:nth-child(2) {  transform-origin: bottom left;  -ms-transform: skew(-28deg, 0deg);  -webkit-transform: skew(-28deg, 0deg);  transform: skew(-28deg, 0deg);  margin-left: 1px;}
.parallelogram:nth-child(1):after {  content: " ";  position: absolute;  display: block;  width: 100%;  height: 100%;  top: 0;  left: 0;  z-index: -1;  background: #008dd0;  transform-origin: bottom left;  -ms-transform: skew(-28deg, 0deg);  -webkit-transform: skew(-28deg, 0deg);  transform: skew(-28deg, 0deg);}
.parallelogram-btn:before {  content: " ";  position: absolute;  display: block;  width: 100%;  height: 100%;  left: -51px;  z-index: -1;  background: #ffa008;  transform-origin: bottom left;  -ms-transform: skew(-28deg, 0deg);  -webkit-transform: skew(-28deg, 0deg);  transform: skew(-28deg, 0deg);}
.parallelogram:first-child {  border-bottom-left-radius: 5px;  border-top-left-radius: 5px;}
.parallelogram-btn {  width: 60px;  position: relative;  background: #ffa008;  color: #FFF;  border: none;  display: inline-block;  height: 90px;  border-bottom-right-radius: 5px;  border-top-right-radius: 5px;  padding: 0px;  margin-left: 51px;  font-weight: 700;  cursor: pointer;}

<div id="parallelogram-container">  <div class="parallelogram"> </div>  <div class="parallelogram"> </div>  <a class="parallelogram-btn"> </a></div>

CSS3 Transform Skew One Side

Try this:

To unskew the image use a nested div for the image and give it the opposite skew value. So if you had 20deg on the parent then you can give the nested (image) div a skew value of -20deg.

.container {  overflow: hidden;}
#parallelogram {  width: 150px;  height: 100px;  margin: 0 0 0 -20px;  -webkit-transform: skew(20deg);  -moz-transform: skew(20deg);  -o-transform: skew(20deg);  background: red;  overflow: hidden;  position: relative;}
.image {  background: url(http://placekitten.com/301/301);  position: absolute;  top: -30px;  left: -30px;  right: -30px;  bottom: -30px;  -webkit-transform: skew(-20deg);  -moz-transform: skew(-20deg);  -o-transform: skew(-20deg);}

<div class="container">  <div id="parallelogram">    <div class="image"></div>  </div></div>

---

Related Topics