CSS triangle + square at 100％

Question

この正方形と三角形は、100％ページ幅のリンク（応答）に表示されます。

http://www.jsfiddle.net/webtiki/x9cxz423/199/

.btn { 
position: relative; 
display: inline-block; 
height: 50px; width:50%; 
text-align: center; 
color: white; 
background: gray; 
line-height: 50px; 
text-decoration: none; 
padding-bottom:15%; 
background-clip:content-box; 
overflow:hidden; 
} 
.btn:after { 
content: ""; 
position: absolute; 
top:50px; left: 0; 
background-color:inherit; 
padding-bottom:50%; width:57.7%; 
z-index:-1; 

-webkit-transform-origin:0 0; 
-ms-transform-origin:0 0; 
transform-origin:0 0; 

-webkit-transform: rotate(-30deg) skewX(30deg);; 
-ms-transform: rotate(-30deg) skewX(30deg); 
transform: rotate(-30deg) skewX(30deg); 
} 
/** FOR THE DEMO **/ 
body{background: url('http://lorempixel.com/output/people-q-c-640-480- 1.jpg');background-size:cover;} 

私は誰も私を助けることができる、それがすべてで仕事を取得してください見えることはできませんか？

は今、あまりにも応答性である、私はあなたのコードを修正したルーク

Answer 1

あなた

をありがとうございました！

.btn { 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 50px; 
 
    min-width:100%; 
 
    text-align: center; 
 
    color: white; 
 
    background: gray; 
 
    line-height: 50px; 
 
    text-decoration: none; 
 
    padding-bottom:30%; 
 
    background-clip:content-box; 
 
    overflow:hidden; 
 
} 
 
.btn:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top:50px; left: 0; 
 
    background-color:inherit; 
 
    padding-bottom:50%; width:57.7%; 
 
    z-index:-1; 
 
    
 
    -webkit-transform-origin:0 0; 
 
    -ms-transform-origin:0 0; 
 
    transform-origin:0 0; 
 
    
 
    -webkit-transform: rotate(-30deg) skewX(30deg);; 
 
    -ms-transform: rotate(-30deg) skewX(30deg); 
 
    transform: rotate(-30deg) skewX(30deg); 
 
} 
 
/** FOR THE DEMO **/ 
 
body{background: url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');background-size:cover;}

<a href="#" class="btn">Hello!</a>