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%;
}​