CSS Dreieck + Quadrat bei 100%

Ich möchte dieses Quadrat und Dreieck, auf dem Link bei 100% Seitenbreite angezeigt (ansprechend).CSS Dreieck + Quadrat bei 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;}

Ich kann nicht scheinen, um es überhaupt zu bekommen arbeiten, kann mir jemand helfen, bitte?

Danke

Luke

Quelle

2016-05-12 LAG95

Also äh ... was ist das Problem Sie konfrontiert? Es scheint zu funktionieren - ich meine, ich sehe ein Quadrat mit einem Dreieck darunter ... – Serlite

Ich will, dass es bei 100% Breite funktioniert .. es funktioniert nicht, wenn ich 100% Breite in – LAG95

Setze das Padding-Boden zu wie 30% auf den Knopf und geben Sie ihm eine Breite von 100%. http://jsfiddle.net/mvLdf75t/ – user2677350

ich Ihren Code festgelegt haben, ist jetzt auch ansprechbar!

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

Quelle

2016-05-15 19:10:49 Blind

CSS Dreieck + Quadrat bei 100%

Antwort

Verwandte Themen