CSS - 2本のオフカット角を持つボタン

Question

こんにちはすべて、私はあなたがbackground: transparent; border: 1px solid #999で、上記の画像で見ることができるもののよう<button>を作成したいです。私は前の同様の問題を同じquestion同様にチェックしましたが、それは3年前ですから、より良い解決策があるかどうかチェックしたいと思います。

あなたはこの結果を達成する方法について考えていますか？あなたの返信を前にありがとう！

Answer 1

あなたは:beforeと:after擬似要素

body { 
 
    background: white; 
 
} 
 
button { 
 
    padding: 20px 45px; 
 
    border: 1px solid #999999; 
 
    display: inline-block; 
 
    position: relative; 
 
    background: white; 
 
    color: #999999; 
 
} 
 
button:before, button:after { 
 
    height: 25px; 
 
    width: 25px; 
 
    background: white; 
 
    position: absolute; 
 
    content: ''; 
 
} 
 
button:before { 
 
    top: 0; 
 
    left: 0; 
 
    border-right: 1px solid #999999; 
 
    transform: rotate(49deg) translate(-71%); 
 
} 
 
button:after { 
 
    bottom: 0; 
 
    right: 0; 
 
    border-left: 1px solid #999999; 
 
    transform: rotate(49deg) translate(71%); 
 
}

<button>CLICK ME</button>

それとも、SVG

button { 
 
    display: inline-block; 
 
    background: transparent; 
 
    border: none; 
 
} 
 
polygon { 
 
    stroke: #999999; 
 
    fill: transparent; 
 
    stroke-width: 1px; 
 
    transition: all 0.3s ease-in; 
 
} 
 
text { 
 
    fill: #999999; 
 
    font-size: 20px; 
 
    transition: all 0.3s ease-in; 
 
} 
 
button:hover polygon { 
 
    fill: black; 
 
} 
 
button:hover text { 
 
    fill: white; 
 
}

<button> 
 
    <svg width="200px" height="100px"> 
 
    <polygon points="165.083,84.769 15.971,84.769 15.971,28.227 33.742,11.263 185.114,11.263 185.114,66.837 "/> 
 
    <text x="100" text-anchor="middle" y="55">CLICK ME</text> 
 
    </svg> 
 
</button>

012を使用することができますし、このような何かを行うことができます

Answer 2

あなたはここで私は:beforeと:afterで使うちょっとしたトリックとJSのフィドルだこの

.selector{ 
 
    background: url(imageAddress); 
 
    }

Answer 3

ようなURLプロパティを使用する必要があります透明な背景を使用しないでください。

See this fiddle

button { background: #fff; padding: 8px 10px; border: 1px solid #333; box-shadow: none; position: relative; } 

button:before {content: ""; width: 10px; height: 15px; position: absolute; border-right: 1px solid #333; left: -5px; top: -6px; transform: rotate(45deg); background: #fff} 

button:after {content: ""; width: 10px; height: 15px; position: absolute; border-left: 1px solid #333; right: -5px; bottom: -6px; transform: rotate(45deg); background: #fff} 

あなたはそれを正しく合うようにあなたと:beforeと:afterの背景を置き換えることができます。