CSS3에서 삼각형 끝난 버튼 모양 다시 만들기

Question

이 모양을 CSS3에서 다시 만들려고합니다. 불행하게도

<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; 
} 

, 확장되지 않습니다 : CodePen demo (나는 내가했던 방법을 설명하기 위해 배경-색상을 변경)

이

내 솔루션이었다. 수직으로 확장하는 것이 중요합니다.

JavaScript 솔루션도 효과가 있습니다.

Answer 1

데모 http://jsfiddle.net/Le8Hw/2/

스타일 :

#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; 
} 

태그 :

<div id=kougiland>weiter</div> 

그냥 원하는대로 색상을 변경하고 그것으로 재미를 :-)

Answer 2

하나 개있는 posibility는 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