在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解決方案也可以工作。

來源

2013-08-27 johnny

你已經擁有你想要的圖像。爲什麼你不能使用它（在切掉灰色背景之後）？你可以爲你的頁面使用多種尺寸。 – 11684

你想如何縮放？ –

不幸的是，jQuery不能直接設置僞元素的高度，或者你可以用jQuery來設置它。如果你想添加其他的HTML元素，用jQuery很容易。 – robooneus

enter image description here

演示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>

只是改變了顏色，你喜歡和有它的樂趣:-)

來源

2013-08-27 14:19:38

這不能解決OP的問題......它需要能夠改變根據內容動態調整高度。 – robooneus

然後用於speudo el寬度：100％;並用jquery設置高度 –

你不能用jquery/js訪問僞元素。它們是創建的元素，不是DOM的一部分。 – robooneus

一個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

來源

2013-08-27 20:40:26 vals

這是一個非常好的答案，值得一票:) – Harry

在CSS3中重新創建三角形按鈕形狀

回答

相關問題