ボーダーのあるボタンのCSSの鋭いコーナーを作成する方法はありますか？

Question

CSSのようなボタンを作成する方法はありますか？ 「ブログ」テキストのあるもの。私は各コーナーにdivを追加してみましたが、これらのdivの枠線を与えて回転させましたが、あなたが見ることができるように（Anout Me btn）、コーナーが正確には合わないので最適な解決策ではありません。

あなたのアイデアをありがとう！

Answer 1

これを行うCSSルールはありませんが、可能です。あなたのボタンには、inline-blockまたはblockの要素が必要です（左端と右端に境界線があります）。次に、コンテナの上部と下部に2つの疑似要素::beforeと::afterを配置する必要があります（absoluteの位置付け）。パースペクティブを追加して、要素のX値をそれに応じて回転させるだけでよいのです。すべてのデバイスで「ピクセル完璧」ではないかもしれませんが、最新のデバイスやブラウザでは完璧に近いと思われます。

あなたは、より良いアイデアを得るために、私は少し前作られたこれらの六角形のボタンを見てすることができますhttps://codepen.io/chriskirknielsen/pen/MpXKVV

Answer 2

CSSでは簡単ではありません。あなたは、CSSシェイプを使って大雑把な類似性を得ようとすることができます。しかし、シェイプとしては、正確にそれを得ることはできません。それがあなたの意図であれば、適切なストロークを置くことはできません。

#octagon { 
    width: 100px; 
    height: 100px; 
    background: red; 
    position: relative; 
} 

#octagon:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    border-bottom: 29px solid red; 
    border-left: 29px solid #eee; 
    border-right: 29px solid #eee; 
    width: 42px; 
    height: 0; 
} 

#octagon:after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    border-top: 29px solid red; 
    border-left: 29px solid #eee; 
    border-right: 29px solid #eee; 
    width: 42px; 
    height: 0; 
}