需要做出格看空的兩側用CSS

Question

我需要一個div的背景看起來像this.I嘗試了一些東西，用線性gradients..but..didn't化妝它有什麼想法？

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創建三角形