CSS三角形+ 100％的方形

我想这个正方形和三角形，显示在100％页面宽度（响应）的链接上。CSS三角形+ 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;}

我似乎无法得到它在所有的工作，任何人都可以帮我吗？

谢谢

卢克

来源

2016-05-12 LAG95

所以呃...什么是你面临的问题？它似乎工作 - 我的意思是，我看到一个三角形指向下方的广场... – Serlite

我希望它在100％的宽度工作..它不工作时，我把100％的宽度在 – LAG95

增加填充底部比如按钮上的30％，并给它100％的宽度。 http://jsfiddle.net/mvLdf75t/ – user2677350

，我已经修复你的代码，现在响应呢！

.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>

来源

2016-05-15 19:10:49 Blind

CSS三角形+ 100％的方形

回答

相关问题