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.
