user3425988 user3425988 - 4 years ago 102
CSS Question

create a div with beveled edge (Html,Css)

I would like to create a div or a section that has the edge in the bottom of your content inside normal and oblique. the result should be like this:
http://themeforest.net/item/delicious-responsive-app-landing-html-theme/full_screen_preview/7965552
can someone help me?

Answer Source

The example you have given uses images with a transparent background.

It is possible in CSS.

JSFiddle

HTML:

<div></div>

CSS:

div {
  height:200px;
  width:1000px;
  background:indianred;
  margin-top:250px;
  position:relative;
}

div::before {
  content:'';
  position:absolute;
  width: 0;
  height: 0;
  border-bottom: 100px solid indianred;
  border-left: 1000px solid transparent;
  top:-100px;
}

div::after {
  content:'';
  position:absolute;
  width: 0;
  height: 0;
  border-top: 100px solid indianred;
  border-right: 1000px solid transparent;
  bottom:-100px;
}

If you want browser compatibility, you'll have to stick with the image method.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download