css - 带切割三 Angular 形的矩形

Question

如何在 css 中制作类似的东西？

Answer 1

你可以在 .up 中添加一个 border-image 来查看上面图像的完整克隆效果!

Fiddle

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