css - 任何人都知道如何创建一个角被切掉的 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

这是使用伪类的解决方案:after

这使得 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，让我们使用我的伪技术，它不隐藏主要背景:) 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);
}