需要使用css使div看起来都是空的

Question

我需要让div的背景看起来像这样。我尝试了一些线性渐变的东西..但是......没有做过。有什么想法吗？

Answer 1

我为您创建了一个codepen：

http://codepen.io/anon/pen/JRbaZo

.rectangle {
  width: 200px;
  height: 40px;
  background-color: red;
  position: relative;
}

.rectangle:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 0; 
  height: 0;
  content: '';
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid white;
}

.rectangle:after {
  position: absolute;
  right: 0;
  top: 0;
  width: 0; 
  height: 0;
  content: '';
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid white;
}

另外请查看here以找到一些有用的技巧如何在css中创建三角形