Odtwarzanie kształtu przycisku o trójkątnym zakończeniu w CSS3

Question

Próbuję odtworzyć ten kształt w CSS3.

To było moje rozwiązanie:

<span><div id="shape"></div></span> 

span { 
    display: block; 
    margin-left: 88px; 
} 

#shape { 
    width: 160px; 
    height: 100px; 
    background: #dcdcdc; 
} 

#shape:before { 
    height: 76px; 
    width: 76px; 
    top: 20px; 
    content:""; 
    position: absolute; 
    border-radius: 10px; 
    background-color: #ccc; 
    left: 60px; 
    -webkit-transform:rotate(45deg); 

} 

#shape:after { 
    height: 76px; 
    width: 76px; 
    top: 20px; 
    content:""; 
    position: absolute; 
    border-radius: 10px; 
    left: 220px; 
    -webkit-transform:rotate(45deg); 
    background-color: #ccc; 
} 

Niestety, nie skaluje: CodePen demo (I zmienił kolory tła, aby zilustrować jak ja go). Ważne jest, aby skalować pionowo.

Rozwiązanie JavaScript też by działało.

Answer 1

demo http://jsfiddle.net/Le8Hw/2/

styl:

#kougiland{ 
    position:relative; 
    width:110px; 
    height:34px; 
    margin:100px; 
    color:white; 
    text-align:center; 
    font-size: 22px; 
    vertical-align: middle; 
    line-height: 30px; 
    background-color:red; 
    box-shadow: 0 4px 8px #ccc, 10px 5px 8px -4px #ccc, -9px 5px 8px -4px #CCC; 
    background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.1) 0%, rgba(244, 244, 244, 0.35) 50%, rgba(225, 225, 225, 0) 51%, rgba(246, 246, 246, 0) 100%); 
} 

#kougiland:before,#kougiland:after{ 
    content:''; 
    position:absolute; 
    top: 4px; 
    height: 26px; 
    width: 26px; 
    background:red; 
    border-radius:4px; 
    -webkit-transform: rotateZ(45deg); 
    background-color:red; 
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 0%, rgba(244, 244, 244, 0.35) 50%, rgba(225, 225, 225, 0) 51%, rgba(246, 246, 246, 0) 100%); 
} 
#kougiland:before{ 
    left:-14px; 
    box-shadow: 0px 7px 11px -4px #ccc; 
} 
#kougiland:after{ 
    right:-14px; 
    box-shadow: 7px 0px 11px -4px #ccc; 
} 

markup:

<div id=kougiland>weiter</div> 

wystarczy zmienić kolor, jak chcesz i baw się z nim :-)

Answer 2

Jeden posibility może być za pomocą transformacji 3D:

.diamond { 
    left: 50px; 
    top: 50px; 
    position: absolute; 
    height: 88px; 
    width: 300px; 
    background-color: transparent; 
    -webkit-perspective: 100px; 
    -moz-perspective: 100px; 
    perspective: 100px; 
} 

.diamond:before { 
    content: ''; 
    width: 100%; 
    height: 51%; 
    left: 0%; 
    top: 0%; 
    position: absolute; 
    border-color: red; 
    border-style: solid; 
    border-width: 3px 3px 0px 3px; 
    -webkit-transform: rotateX(20deg); 
    -moz-transform: rotateX(20deg); 
    transform: rotateX(20deg); 
    border-radius: 6px; 
    background-color: blue; 
} 

.diamond:after { 
    content: ''; 
    width: 100%; 
    height: 51%; 
    left: 0%; 
    bottom: 0%; 
    position: absolute; 
    border-color: red; 
    border-style: solid; 
    border-width: 0px 3px 3px 3px; 
    -webkit-transform: rotateX(-20deg); 
    -moz-transform: rotateX(-20deg); 
    transform: rotateX(-20deg); 
    border-radius: 6px; 
    background-color: lightblue; 
} 

fiddle