Skew One Side Only of an Element

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>

Skew only right side of element

You could use pseudo selector :before on first li and style that,

/* nav stuff */

ul,

li,

a {

  display: inline-block;

  text-align: center;

}

/* appearance styling */

ul {

  /* hacks to make one side slant only */

  overflow: hidden;

}

li {

  background-color: black;

  transform: skewX(-20deg);

  -ms-transform: skewX(-20deg);

  -webkit-transform: skewX(-20deg);

}

li:nth-child(1):before {

  content: "";

  position: absolute;

  width: 10px;

  height: 100%;

  background: black;

  -webkit-transform: skewX(20deg);

  left: -5px;

}

li a {

  padding: 3px 15px 3px 10px;

  text-decoration: none;

  transform: skewX(20deg);

  -ms-transform: skewX(20deg);

  -webkit-transform: skewX(20deg);

   color:white;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<ul class="breadcrumb">

  <li><a href="">Home</a></li>

  <li><a href="#">Products</a></li>

</ul>

Skew only one side of before & after to get flat-arrow

You can adjust the transform-origin then hide the overflowing part of the skewed element and change the left border of the first child on hover:

body {

  margin: 0;

}

.breadcrumbs {

  background-color: white;

  width: 100%;

  padding: 0 1rem;

  font-size: 0;

  margin: 1rem;

}

.breadcrumbs .breadcrumb-step {

  display: inline-block;

  width: 12.33%;

  height: 5rem;

  text-decoration: none;

  color: black;

}

/*added this*/

.breadcrumbs .breadcrumb-step:first-child {

  width: 15.33%; 

  overflow:hidden;

  border-left:1px solid lightgrey;

}

/**/

.step-title {

  display: none;

}

.breadcrumb-step:before,

.breadcrumb-step:after {

  content: '';

  display: block;

  height: 50%;

  box-sizing:border-box;

  width: 100%;

  border: 1px solid lightgrey;

}

.breadcrumb-step:before {

  transform: skew(30deg);

  transform-origin:right bottom; /*added this*/

  border-bottom: none;

}

.breadcrumb-step:after {

  transform: skew(-30deg);

  transform-origin:right top; /*added this*/

  border-top: none;

}

/*added this*/

.breadcrumb-step:hover:before,

.breadcrumb-step:hover:after,

.breadcrumbs .breadcrumb-step:first-child:hover{

  border-color: black;

}
<div class="breadcrumbs">

  <a class="breadcrumb-step" href="#"><span class="step-title">Home</span></a>

  <a class="breadcrumb-step" href="#"><span class="step-title">About</span></a>

  <a class="breadcrumb-step" href="#"><span class="step-title">Contact Us</span></a>

</div>

one sided skew with css

Add overflow:hidden to your .bg-style1 rule and transformX(-40%) to the transform: in .bg-style1:after

.bg-style1 {

  padding-top: ;

  background: #ccc;

  position: relative;

  display: block;

  z-index: 2;

  overflow: hidden;

}

.bg-style1:after {

  content: " ";

  position: absolute;

  display: block;

  width: 30%;

  height: 100%;

  left: 0;

  top: 0;

  z-index: -1;

  background: #333333;

  -ms-transform: skew(-30deg, 0deg);

  -webkit-transform: skew(-30deg, 0deg);

  transform: skew(-30deg, 0deg) translateX(-50%);

}
<section class="page">

  <div class="bg-style1">

    <h1>What is lorem ipsum</h1>

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has

    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing

    software like Aldus PageMaker including versions of Lorem Ipsum.

  </div>

</section>

How can I skew one side of a div and then replicate it and skew a different side?

HTML

<div class="crop">
    <div class="skew"></div>
</div>

CSS

.crop {
    width: 492px;
    height: 240px;
    overflow: hidden;
}
.skew {
    display: block;
    height : 100px;
    width : 500px;
    background : blue;
    margin : 0 auto 0 32px;
    position:relative;
    -webkit-transform: skew(-30deg);
    -moz-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
    transform: skew(-30deg);
}
.skew:after {
    height : 100px;
    width : 500px;
    background : blue;
    margin : 0 auto;
    position:absolute;
    bottom: -120px;
    content:'';
}

Fiddle: http://jsfiddle.net/neybabgj/7/

Trying to manipulate only One side of a div

This looks like what you might be looking for: Matrix transformation

http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

Skew div border of one side only using one div only

I believe this is what you want:

http://jsfiddle.net/5a7rhh0L/3/

CSS:

#a {
    position: relative;
    width: 120px;
    padding: 10px 20px;
    font-size: 20px;
    position: relative;

    color: #2E8DEF;
    background: #333333;
    border-bottom: 3px solid #2E8DEF;
}
#a:after {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;

    background: #333333;
    border-bottom: 3px solid #2E8DEF;
    border-right: 20px solid #2E8DEF;

    transform-origin: bottom left;
    -ms-transform: skew(-30deg, 0deg);
    -webkit-transform: skew(-30deg, 0deg);
    transform: skew(-30deg, 0deg);
}

Related Topics

Cannot Get Bootstrap 4 Horizontal Form to Work as Required

Flexbox Adding Newline to Clipboard

Can CSS Identifiers Begin with Two Hyphens

Why Does the CSS3 Pseudo ::Selection Not Change the Color for All Parts

Changing the Color of a Jquery UI Slider as You Slide It

CSS Sticky Footer Margin

What Is the Purpose of Flex-Start and Flex-End on Justify-Items and Justify-Self

Use Linear Gradient in CSS to Split Div in 2 Colors But Not in Equal Halves

In CSS 2.1, If a Parent Establish a Stacking Context, Why Can the Children's Text Go Under the Parent But the Background Color Cannot

How to Change CSS Class for the Inputfield and Label When Validation Fails

Prevent a Pseudo Element from Triggering Hover

How to Convert Markdown + CSS -> PDF

How to Stop Internet Explorer's Propriety Gradient Filter from Cutting Off Content That Should Overflow

Holy Grail Layout with 100% Height

How to Position Background Image in Bottom Right Corner? (Css)

CSS Calc() - Multiplication and Division with Unit-Ed Values

Simulating Border-Collapse in Lists (No Tables)

Table-Cell - Some Kind of Colspan


Leave a reply



Submit