css - カットされた三角形の長方形

Question

cssでそのようなものを作る方法は？

Answer 1

.up にボーダー画像を追加して、上の画像の完全なクローン効果を確認できます!

フィドル

div.wrapper {
    background:#d89043;
    width:400px;
    height:300px;
    position:relative;
}
div.up {
  width:0px; 
  height:0px; 
  border-left:50px solid transparent;  /* left arrow slant */
  border-right:50px solid transparent; /* right arrow slant */
  border-bottom:50px solid #fff; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
  position:absolute;
  bottom:0;
  margin-left:40%;
}​