How to create a wrapper with different angles in CSS


Tags: css,css3,css-shapes

Problem :

How can I create an angled div like the one in the below pic with CSS?

enter image description here

I have tried some transforms but didn't get the exact result that I am looking for.

Below is a snippet of the code that I had tried:

.angledwrapper {
  width: 105%;
  float: left;
  margin-left: -13px;
  margin-top: 65px;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
.mindycontentwrap {
  width: 100%;
  float: left;
  background: #777;
}
.angledcontent {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  float: left;
  min-height: 200px;
  width: 67%;
}
.angledwrapbottom {
  width: 100%;
  float: left;
  background: #777;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
.angledtop {
  width: 105%;
  float: left;
  background: #777;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
.Jane {
  position: relative;
  max-width: 30%;
  float: left;
}
<div class="musicwrap_container">
  <div class="angledwrapper">
    <div class="angledtop"></div>
    <div class="mindycontentwrap">
      <img src="xxxxx/images/Jane.png" title="Jane" alt="Jane" class="Jane">
      <div class="angledcontent"></div>
    </div>
    <div class="angledwrapbottom"></div>
  </div>
</div>

Fiddle Demo

Any idea?



Solution :

This sort of a shape can be created in multiple ways and this answer covers a few of them. The pros and cons of each approach would be very similar to those described in this answer.

Using CSS Gradients:

This can also be done using linear-gradient background images. The approach would be same as the transforms except that here background-image of required size is placed on top and bottom rather than extra (real/pseudo) elements.

div {
  position: relative;
  padding: 55px 4px 125px;  /* important for space at top and bottom */
  background: linear-gradient(to top left, firebrick 49.5%, transparent 50.5%), linear-gradient(firebrick, firebrick), linear-gradient(to bottom right, firebrick 49.5%, transparent 50.5%);
  background-size: 100% 50px, 100% calc(100% - 175px), 100% 125px;  /* Y axis value controls height of angled parts */
  background-repeat: no-repeat;
  background-position: 0px 0px, 0% 50px, 0% 100%;
  min-height: 250px;
}
<div>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>


Using SVG:

This can also created by using SVG path element to create the shape and place it absolutely behind the container.

div {
  position: relative;
  padding: 50px 4px 125px;  /* important for space at top and bottom */
  min-height: 250px;
}
div svg {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: -1;
}
path {
  fill: firebrick;
}
<div>
  <svg viewBox='0 0 800 800' preserveAspectRatio='none'>
    <path d='M0,40 L800,0 800,690 0,800z' />
  </svg>
  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>


Note: The below snippet was part of the original answer but it is not advisable for containers that have dynamic width. As width increases, the skew creates trouble. Open the below snippet in full screen mode to see the problem.

Using transform: skewY() two pseudo-elements that are skewed at different angles can be placed on top + bottom of a normal div to create the required appearance.

div {
  position: relative;
  margin: 60px 4px 120px;  /* important to push element and leave space for angled parts */
  padding: 4px;
  background: firebrick;
  min-height: 150px;
}
div:after,
div:before {
  position: absolute;
  content: '';
  width: 100%;
  background: firebrick;
  backface-visibility: hidden;
  z-index: -1;
}
div:before {
  top: 0px;
  left: 0px;
  height: 100%;
  transform-origin: left top;
  transform: skewY(-4deg);
}
div:after {
  bottom: 0px;
  left: 0px;
  height: 100%;
  transform-origin: right bottom;
  transform: skewY(-10deg);
}
<div>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>

Here is another approach using perspective transforms but this also won't suit you because adding text within it is very tough. There is another approach using CSS clip-path but that will work only in WebKit browsers.


    CSS Howto..

    How to specify a html tag on a LESS CSS nested class?

    How to get an image to resize on scroll?

    Google Maps visual refresh - how do disable font Roboto in InfoWindow

    How to get a list of valid values for a CSS property with javascript?

    CSS: How to break images into rows?

    How to create shaded divs like this with CSS

    How can I insert text before an item with CSS?

    urls being shown after links when printing web page

    How to include stylesheet file only for one div?

    I need to edit the css properties of a link when it's active (a:active) with jquery after they have been set by normal html css. How do I do that?

    How do I get this div to be positioned below this search form?

    How to disable google translator plug in and set margin-top: to 0px for body element?

    How can I stop my CMS’s CSS affecting my content?

    jQuery show multiple image thumbnail before upload

    How to make an element with background image appear using css animation/javascript

    How to use an existing source map to compile scss to css?

    How to display loading.gif at the center of the screen which has a scrollbar

    How to force thumbnails to overflow right and not below

    How to reverse a CSS3 hover transformation?

    How do I add a class to a default bootstrap class

    How to add far-future expires headers to minified cssfiles/scripts?

    How do I make the HTML Slider with CSS stay in the box?

    How to gain hanging indent list with CSS Counters?

    Lazy loading images how

    How to right align last two columns of a table with CSS

    How to resize grid-view column width?

    How to snap divs together vertically in CSS like Pinterest have

    How to enable bootstrap 4 flex?

    How do I centralize an ordered list?

    How do you transition a height without the element going outside the parents border?