任何人都知道如何創建一個角落切掉的CSS矩形？

Question

有誰知道如何創建CSS的多邊形，看起來像這樣：

Answer 1

我做了一個jsfiddle，可能會有幫助。我將它改編自這一個：http://jsfiddle.net/76EUw/2/

無論如何，這裏是我所做的：

.corner { 
    width: calc(300px - 20px); /*300 is the width, 20 is the size of the 'cut'*/ 
    height: 0px; 
    /*change the top/left depending on which corner you want to use*/ 
    border-top: 20px solid red; /*I made this red just so it was easier to see*/ 
    border-right: 20px solid white; /*not sure what you will do if this is not on a white background.*/ 
} 
.main { 
    width: 300px; 
    height: 100px; 
    background-color: black; 
    color:white; 
    text-align:center; 
} 

Answer 2

下面是使用僞類的解決方案：更清潔DOM後

這使得。

http://jsfiddle.net/9Wyuj/2/

/* Rectangle with bottom right (br) corner chopped */ 

.rectangle-br-chopped { 
    width: 300px; 
    height: 100px; 
    background: blue; 
} 
.rectangle-br-chopped:after { 
    height: 0; 
    width: 240px; 
    content:""; 
    position: absolute; 
    border-top: 30px solid blue; 
    border-left: 30px solid blue; 
    border-right: 30px solid white; 
    margin: 100px 0 0 0; 
} 

Answer 3

OKI，讓我們一起去雷其犯規的僞TECHNIC隱藏主要背景:) http://jsfiddle.net/XE4GE/

p {margin:1em auto; 
    width:400px; 
    overflow:hidden; 
    position:relative; 
    color:white; 
    font-size:2em; 
    padding:1em; 
} 
p:after { 
    content:''; 
    height:60px; 
    width:60px; 
    position:absolute; 
    z-index:-1; 
    bottom:0; 
    right:0; 
    margin:-30px; 
    -webkit-transform:rotate(45deg); 
     -moz-transform:rotate(45deg); 
     transform:rotate(45deg); 
    outline:1000px solid black; 
} 
body { 
    background:url(http://lorempixel.com/100/100/abstract/10); 
}