How To Transform Each Side Of A Shape Separately?

How do I create a CSS shape in which each side is transformed separately. Something like the shape in the below image. Is that possible using CSS only without images?

Solution 1:

I don't think there is any way in CSS to pick and transform each side separately but you can achieve the shape in question by using perspective transforms (pure CSS).

Rotating the element with perspective along both X and Y axes sort of produces the effect of each side having a separate transformation. You can adjust the angles and the perspective setting to create the shape exactly as required.

.shape {
  background: black;
  margin: 100px;
  height: 200px;
  width: 200px;
  transform: perspective(20px) rotateX(-2deg) rotateY(-1deg); /* make perspective roughly 10% of height and width */
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><divclass="shape"></div>

---

Or, you could make use of the clip-path feature. Clip paths can be created either by using CSS alone or by using inline SVG. SVG clip paths have much better browser support than the CSS version.

div {
  height: 200px;
  width: 200px;
  background: black;
}
.css-clip {
  -webkit-clip-path: polygon(0%10%, 100%0%, 85%100%, 15%95%);
  clip-path: polygon(0%10%, 100%0%, 85%100%, 15%95%);
}
.svg-clip {
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
}

/* Just for demo */div{
  display: inline-block;
  margin: 10px;
  line-height: 200px;
  text-align: center;
  color: beige;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><!-- CSS Clip path --><divclass='css-clip'>CSS Clip Path</div><!-- SVG Clip path --><svgwidth='0'height='0'><defs><clipPathid='clipper'clipPathUnits='objectBoundingBox'><pathd='M0 0.1, 1 0, 0.85 1, 0.15 0.95' /></clipPath></defs></svg><divclass='svg-clip'>SVG Clip path</div>

Note: Though this shape can be achieved using CSS, it is better not to use CSS for such complex shapes.

Solution 2:

As with many CSS properties relating to margins, padding and borders, there are four individual properties - one for each corner of a box element - and one shorthand property. Each of the corner attributes will accept either one or two values. The border-radius property will accept up to two values in WebKit browsers and up to eight now in Firefox 3.5.

-moz-border-radius: 36px50px50px36px / 12px30px30px12pxborder-radius: 36px50px50px36px / 12px30px30px12px

Demo

Solution 3:

Have a look here for explanation see here. Basically you will need a rectangle and four triangles or a parallelogram and two rectangles. Depends what you want to achieve.

Solution 4:

#trapezium {
   height: 0; 
   width: 80px;
   border-bottom: 80px solid blue;
   border-left: 40px solid transparent;
   border-right: 40px solid transparent;
}

use this i thing usefull for you.

and any another shape please visited this link http://www.css3shapes.com/