按鈕形狀與透明度和只有虛線邊框

它是否能夠創建一個具有透明背景和虛線邊框，自定義形狀的按鈕？按鈕形狀與透明度和只有虛線邊框

我現在能夠與背景顏色要做到這一點，但是當我嘗試以填充內部沒有任何色彩，沒有按預期工作。

body{ 
 
    background: #999 
 
} 
 
button { 
 
    height: 50px; 
 
    width: 250px; 
 
    border: dotted 1px #FFF; 
 
    border-bottom: none; 
 
    background: none; 
 
    position: relative; 
 
} 
 
button:after, 
 
button:before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 100%; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
} 
 

 
button:after { 
 
    border-color: #fff transparent transparent transparent; 
 
    border-width: 1px 125px 0 0; 
 
    right: 1px 
 
} 
 

 
button:before { 
 
    border-color: transparent transparent #fff transparent; 
 
    border-width: 0 125px 1px 0; 
 
    left: 0 
 
}

<body> 
 
<button></button> 
 
</body>

來源

2017-09-03 Ricky Spanish

我不是很確定按鈕，但你肯定可以創造出形狀的div。

你在找什麼是一個創造形狀邊界的戲劇。

#triangle{ 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-left: 30px solid transparent; 
 
\t border-right: 30px solid transparent; 
 
\t border-bottom: 40px solid green; 
 
}

<div id="triangle"></div>

正如你所看到的，我創建了一個三角形，只是邊框，關鍵是要了解一個div的邊界。它們不直，它們的末端是楔形的。

我認爲這是一個很好的起點。

來源

2017-09-03 06:11:36

按鈕形狀與透明度和只有虛線邊框

回答

相關問題