css - 1 つの角が切り落とされた 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

Here is a solution using the pseudo-class :after

This makes for a cleaner 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);
}