ホームページ > 記事 > ウェブフロントエンド > CSSで三角形やボタンを作る簡単な例を詳しく解説
CSSで三角形やボタンを作る簡単な例を詳しく解説
- 高洛峰オリジナル
- 2017-03-04 10:08:382685ブラウズ
まず、三角形の作成方法について説明します。たとえば、Web サイトにアクセスすると、ナビゲーション バーにいくつかの三角形が表示されると思います。
NetEase ホームページのヘッダー メニュー バーにもそのような三角形があります。
マウスが上を通過すると、以下に示すように三角形が上下に反転します
ここで、主に境界線を使用して三角形を作成する方法を共有します
まず、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 メソッド
主に
を使用して、ボーダー スタイル、ボックス シャドウ、疑似クラス効果によって実現されます。 ソース コード:
<!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 サイトをサポートしていただければ幸いです。 
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：キャンバス上での万華鏡効果の実装例次の記事：キャンバス上での万華鏡効果の実装例