How to Use Skew Only in the Parent Element

How to use skew only in the parent element?

It's really easy, you just need to unskew the thing for the children. Unskew means applying another skew transform, but of opposite angle this time.

.parent { transform: skewX(45deg); }
.parent > * { transform: skew(-45deg); }

In general, if you apply a number of transforms on a parent element and you want the child elements to go back to normal, then you have to apply the same transforms, only in reverse order (the order does matter in most cases!) and with a minus for angle/ length values used for skew, rotate or translate. In the case of scale, you need a scale factor of 1/scale_factor_for_parent. That is, for scale, you would do something like this:

.parent { transform: scale(4); }
.parent > * { transform: scale(.25); /* 1/4 = .25 */ }

A diamond shape with children is pretty easy.

DEMO

Result:

HTML:

<div class='wrapper'>
  <div class='diamond'>
    <div class='child'>Yogi Bear</div>
    <div class='child'>Boo Boo</div>
  </div>
</div>

CSS:

.wrapper {
  overflow: hidden;
  margin: 0 auto;
  width: 10em; height: 10em;
}
.diamond {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 4em 1em 0;
  width: 86.6%; height: 100%;
  transform: translateY(-37.5%) rotate(30deg) skewY(30deg);
  background: lightblue;
}
.child {
  transform: skewY(-30deg) rotate(-30deg);
}

CSS: Is there a way to use the transform skew property on a specific div without affecting child elements?

You can negate the skewing on the child element

#skew-left p {
    transform: skewX(-45deg);
}

Reposition them afterwards as necessary.

How to skew element but keep text normal (unskewed)

skew a parent element (li in this example) and inverse skew its child elements:

nav ul {
  padding: 0;
  display: flex;
  list-style: none;
}
nav li {
  transition: background 0.3s, color 0.3s;
  transform: skew(20deg); /* SKEW */
}

nav li a {
  display: block; /* block or inline-block is needed */
  text-decoration: none;
  padding: 5px 10px;
  font: 30px/1 sans-serif;
  transform: skew(-20deg); /* UNSKEW */
  color: inherit;
}

nav li.active,
nav li:hover {
  background: #000;
  color: #fff;
}

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Make the image inside the skewed div normal

Just add the opposite value to the child. So add the following to the image:

/* positive 15deg */
-ms-transform: skew(15deg, 0deg);
-webkit-transform: skew(15deg, 0deg);
transform: skew(15deg, 0deg);

EDIT:

Here's a working demo.

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.

Auto height of parent div where child divs have skewed edges

I found the fix to my problem.

All i had to do was add:

padding-top: 5%;
padding-bottom: 5%;

The reason why it has to be 5 is because my skew is going 5 degrees!

To my outer div. everything works fine now. Thanks everyone for their time!

How to prevent CSS transform skew from breaking child element position?

You need apply a skew for <a> inside an <ul>, not for ul:

.has-dropdown a {
    position: relative !important;
    transform: skew(-20deg);
  }

Transform - Skew anchor tag background only

You can skew the text back. Since transform doesn't work on non block elements, and a is an inline tag, you need to change the a tag display to inline-block or block:

.btn {
  transform: skewX(-59deg);
  background-color: yellow;
}

.btn a {
  display: inline-block;
  transform: skewX(59deg);
}

<div class="wrapper">
  <div class="btn btn-one">
    <a href="#">BTN ONE</a>
  </div>
  <div class="btn btn-two">
    <a href="#">BTN TWO</a>
  </div>
</div>

---

Related Topics