Preview - THEME-CENTRE.COM

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
<style>
.slanted {
  position: relative;
  height: 200px;
  background: teal;
  float: left;
  float: left;
  margin: 10px;
}
.slanted.slanted-left {
  width: 300px;
}
.slanted.slanted-right {
  margin-left: 110px;
  width: 200px;
}
.slanted.slanted-right.slant-to-right {
  margin-left: 10px;
  width: 300px;
}
.slanted.slanted-top {
  width: 300px;
}
.slanted.slanted-bottom {
  width: 300px;
}

.slanted:after,
.slanted:before {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
}

.slanted-right.slant-to-left:after {
  left: -100px;
  border-right: 100px solid teal;
  border-top: 200px solid  white;
}
.slanted-right.slant-to-right:after {
  right: 0px;
  border-right: 100px solid white;
  border-bottom: 200px solid  teal;
}
.slanted-left.slant-to-right:after {
  left: 0;
  border-left: 100px solid white;
  border-top: 200px solid teal;
}
.slanted-left.slant-to-left:after {
  right: 0;
  border-left: 100px solid teal;
  border-bottom: 200px solid white;
}

.slanted-top.slant-to-left:after {
  bottom: 0;
  border-bottom: 100px solid teal;
  border-left: 300px solid white;
}
.slanted-top.slant-to-right:after {
  bottom: 0;
  border-bottom: 100px solid teal;
  border-right: 300px solid white;
}
.slanted-bottom.slant-to-right:after {
  top: 100px;
  border-bottom: 100px solid white;
  border-right: 300px solid teal;
}
.slanted-bottom.slant-to-left:after {
  top: 100px;
  border-bottom: 100px solid white;
  border-left: 300px solid teal;
}
</style>
</head>

</html>

HTML FORMS / CSS / Slanting Div