ホームページ > 記事 > ウェブフロントエンド > CSSで三角形を設定する方法
CSS で三角形を設定する方法: 最初に HTML サンプル ファイルを作成し、次に、span 要素をブロック レベル要素として設定し、境界線の 4 辺を異なる色に設定し、最後に上境界線を設定します。左右の境界線の幅は三角形として実現できます。
このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。
CSS を使用して三角形を設定する
1. 開発中、さまざまなプロジェクトを区別するために、要素を強調したりマークしたりするためにいくつかの小さな三角形が使用されることがあります。三角形をよりわかりやすい色で描くことで、効果が得られます。では、三角形の描き方はどうすればよいでしょうか。これまで知りませんでした。最近、三角形を使用している Web ページをいくつか見かけました。マークするとき、すべて背景画像を使用します。そのようにマークします。 Web ページに表示されると、少し硬く感じます。結局のところ、画像の読み込みは CSS の読み込みほどスムーズではありません。
コードを見てみましょう: ここでは、span 要素をブロックレベルの要素として設定し、枠線の四辺を別々に設定しており、それぞれ色が異なります:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100%;
margin: 50px 0;
text-align: center;
}
span {
position: relative;
margin: 0 auto;
display: block;
width: 50px;
height: 50px;
border-style: solid;
border-width: 50px;
border-top-color: red;
border-left-color: blue;
border-bottom-color: yellow;
border-right-color: black;
}
</style>
</head>
<body>
<div>如何设置三角形?</div>
<div>
<span>
</span>
</div>
</body>
</html>実行結果: 四辺の枠線は実際にはこうなっていることがわかります台形構造の一種です 台形の上と下を0にすると三角形になりますね そしてこれはhtmlやcssではできません 静的ページを使わずに実装できます画像の不連続な表示は問題ありません;
次のステップは、台形の上部と下部を 0 に変更することです [推奨: " css ビデオ チュートリアル ]]
上下が 0 になります。非常に簡単です。要素の高さと幅を 0
width:----->0 に設定するだけです。上下 2 種類の矢印
高さ:------>0 左右 2 種類の矢印を取得
1. 上矢印が必要な場合は、要素の左右の境界線と下境界線を削除します。
2. 下矢印が必要な場合は、左右の境界線を削除するだけです
#3. 左矢印が必要な場合は、上下と右の境界線を削除します4. 右矢印が必要な場合は、必要なときに削除するだけです上下の境界線と左の境界線 アイデアは良いので試してみました。矢印を追加したい場合は、CSS を次のように設定します。span {
position: relative;
margin: 0 auto;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px;
/* 设置上边框和左右边框宽度为0 开始*/
border-top-width: 0;
border-left-width: 0;
border-right-width: 0;
/* 设置上边框和左右边框宽度为0 开始*/
border-top-color: red;
border-left-color: blue;
border-bottom-color: yellow;
border-right-color: black;
} 実行結果: I機能しないことがわかりました、何ですか? なし
span {
position: relative;
margin: 0 auto;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px;
/* 设置上边框和左右边框宽度为0 开始*/
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
/* 设置上边框和左右边框宽度为0 开始*/
/* border-top-color: red;
border-left-color: blue; */
border-bottom-color: yellow;
/* border-right-color: black; */
}実行結果: OK、完了です。 ！ ！
span {
position: relative;
margin: 0 auto;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px;
/* 设置上边框和左右边框宽度为0 开始*/
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
/* 设置上边框和左右边框宽度为0 开始*/
border-top-color: red;
/* border-left-color: blue;
border-bottom-color: yellow;
border-right-color: black; */
}
span {
position: relative;
margin: 0 auto;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px;
/* 设置上边框和左右边框宽度为0 开始*/
border-top-color: transparent;
border-bottom-color: transparent;
/* border-left-color: transparent; */
border-right-color: transparent;
/* 设置上边框和左右边框宽度为0 开始*/
/* border-top-color: red; */
border-left-color: blue;
/* border-bottom-color: yellow;
border-right-color: black; */
}
span {
position: relative;
margin: 0 auto;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
/* border-right-color: transparent; */
/* border-top-color: red;
border-left-color: blue;
border-bottom-color: yellow; */
border-right-color: black;
}
span {
position: relative;
margin: 0 auto;
display: block;
width: 0px;
height: 0px;
/* 先后设置上右下左的border-color属性都是一样的，需要哪个箭头，再设置哪个方向的颜色属性，这样，最后设置的属性覆盖了前面的属性，就变成箭头了 */
border: 50px solid transparent;
border-top-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100%;
margin: 50px 0;
text-align: center;
}
.jindaobox {
position: relative;
width: 980px;
margin: 20px auto;
}
li {
list-style: none;
float: left;
position: relative;
border: 1px solid #eee;
margin-right: 30px;
padding: 10px 20px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.active {
border: 1px solid red !important;
}
.active::after {
position: absolute;
content: "";
height: 0;
width: 0;
border: 8px solid transparent;
border-top-color: red;
top: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div>请选择你喜欢的电影</div>
<ul>
<li>飞龙在天</li>
<li class="lis active">紫川</li>
<li>封神演义</li>
<li class="lis active">风云第一刀</li>
<li>天外飞仙</li>
</ul>
</body>
</html>実行結果:
以上がCSSで三角形を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。