CSS3

Question

'da üçgen uçlu bir düğme şekli oluşturma Bu şekli CSS3'te yeniden oluşturmaya çalışıyorum. Maalesef

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

, ölçeklendirmez: CodePen demo (ben yaptım şekilde göstermek için background-renkleri değişti)

Bu

benim çözüm oldu. Dikey olarak ölçeklendirilmesi önemlidir.

Bir JavaScript çözümü de işe yarayacaktı.

Answer 1

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

stili:

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

işaretleme:

<div id=kougiland>weiter</div> 

sadece senin gibi rengini değiştirmek ve onunla eğlenin :-)

Answer 2

Bir olasılık 3D dönüşümleri kullanıyor olabilir:

.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