CSSで三角形やボタンを作る簡単な例を詳しく解説-CSSチュートリアル-php.cn

CSSで三角形やボタンを作る簡単な例を詳しく解説

高洛峰

リリース： 2017-03-04 10:08:38

オリジナル

2705 人が閲覧しました

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

NetEase ホームページのヘッダーメニューバーにもそのような三角形があります。

CSSで三角形やボタンを作る簡単な例を詳しく解説

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

CSSで三角形やボタンを作る簡単な例を詳しく解説

ここで、主に境界線を使用して三角形を作成する方法を共有します

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

さて、それを入れてみましょう 1 つの三角形を取り出すのは、実際には他の三角形を隠すためです

ソースコード:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正方形</title>
    <style>
    .p{   
        width: 0px;   
        height: 0px;   
        border-top:50px solid red;         
        border-bottom:50px solid green;   
        border-left:50px solid yellow;   
        border-right:50px solid blue;   
        /*注意：四条边框的宽度必须相同！*/   
}   
    </style>
</head>
<body>
    <p class="p"></p>
</body>
</html>

ログイン後にコピー

効果は次のとおりです:

次に、 button メソッド

CSSで三角形やボタンを作る簡単な例を詳しく解説主に

を使用して、ボーダースタイル、ボックスシャドウ、疑似クラス効果によって実現されます。ソースコード:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作三角形箭头</title>
    <style>
    .arrow{   
        width:0;   
        height:0;   
        border-top:50px solid #000;     /*设置并显示上边框*/   
        border-bottom:none;             /*不设置下边框*/   
        border-left:50px solid transparent;     /*设置但隐藏左边框*/   
        border-right:50px solid transparent;    /*设置但隐藏右边框*/   
    }   
    .arrow:hover{   
        border-top:none;                  /*鼠标经过时，不设置上边框*/   
        border-bottom:50px solid #000;    /*鼠标经过时，设置并显示下边框*/   
    }   
    </style>
</head>
<body>
    <p class="arrow"></p>
</body>
</html>

ログイン後にコピー

効果:

想像力を働かせて、より良い結果を生み出すことができます。皆さんの楽しい学習をお祈りしています。

CSS を使用して三角形とボタンを作成する上記の簡単な例は、エディターによって共有されたすべてのコンテンツです。参考にしていただければ幸いです。また、PHP 中国語 Web サイトをサポートしていただければ幸いです。 CSSで三角形やボタンを作る簡単な例を詳しく解説