CSS三角形+正方形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;}

我似乎完全无法使它工作，有人可以帮忙吗？

谢谢

Luke

- LAG95

---

那么...你面临的问题是什么？它似乎可以工作 - 我的意思是，我看到一个带有向下三角形的正方形... - Serlite

我希望它能以100%的宽度工作...但当我设置100%的宽度时，它无法正常工作。 - LAG95

将按钮的padding-bottom增加至约30%，并将其宽度设置为100%。http://jsfiddle.net/mvLdf75t/ - user2677350

有没有一种简单的方法让这个三角形更扁平？把它压缩一下？谢谢！ - LAG95

添加垂直刻度？http://jsfiddle.net/x9cxz423/990/ - G-Cyrillus

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>

- Blind