ボタンの形は透明で、点線の枠のみ

透明な背景と点線の枠を持つカスタムの形状のボタンを作成できますか？ボタンの形は透明で、点線の枠のみ

私は、背景色でこれを実行できるようになったんだけど、私は、任意の色なし、内側を埋めるためにしようとすると、予想通り、何も機能しません。

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

ボタンの形は透明で、点線の枠のみ

答えて

関連する問題