CSSで三角形とボタンを作成する

CSSで三角形とボタンを作成します

前回のブログ投稿の境界線スタイルに関する知識を利用して、三角形とボタンを作成できます。

まず、三角形の作成方法について説明します。Web サイトにアクセスすると、ナビゲーション バーにいくつかの三角形が表示されると思います。たとえば、

NetEase ホームページのヘッダー メニュー バーにもこのような三角形が表示されます

マウスが上を通過すると、以下に示すように三角形が垂直に反転します

ここで、主にボーダーを使用して三角形を作成する方法を共有します

まず、4つの三角形が結合された正方形は、正方形の4つの境界線によって形成される4つの三角形です

ソースコード:

リーリー

効果は次のとおりです:

さて、三角形の 1 つを削除するには、実際には他の三角形を非表示にする必要があります

ソースコード:

リーリー

効果は次のとおりです:

次に、ボタンのメソッドを共有します

主に境界線スタイル、ボックスシャドウ、疑似クラスエフェクトを使用して実現されます

ソースコード:

リーリー

効果:

スタート

エフェクトはあまり美しくないかもしれないので、想像力を駆使してより良いエフェクトを作成してください。