コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > CSSを使って三角形を作成する

CSSを使って三角形を作成する

WBOY
リリース： 2016-08-10 08:49:42
オリジナル
1215 人が閲覧しました

html代コード:

css代番号：

.div{
border-top:40px ソリッド #ff0077;
border-left:40px ソリッド #004444;
border-bottom:40px ソリッド #999999;
border-right:40px ソリッド #333333;
高さ: 0px;
幅: 0px;
}

效果:

现在一一分解完了

html代：



< ;/div>

css代番号：

.triggle-top,.triggle-left,.triggle-bottom,.triggle-right{
border:100px 単色透明;
高さ: 0;
幅: 0;
}
.triggle-top{
border-top -color:#ff0077;
}
.triggle-left{
border-left-color:#004444;
}
.triggle-bottom{
border-bottom-color:#999999;
}
.triggle-right{
境界線の右の色: #333333;
}

效果图:

总之：制作小三角はborderプロパティを利用して制作しているものです

额外：

また有我想说的就是一般一标签比如：

これ删除x可用:after{content:'x'}来实现

関連ラベル：
用css 制作三角
ソース：php.cn
前の記事：CSSにおけるPositionの使い方を詳しく解説。 次の記事：#8.8.16概要# 難易度: 関係セレクター
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS スタイルがサイトに適用されない Bootstrap5を使用してWebサイトを作成していますが、index.cssプロパティがindex.htmlに適用されません。サービス カードの上にマウスを移動すると、背景が変...
から 2024-04-06 17:12:23
0
1
336
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
CSS を使用して Next.js の三目並べボードの各行の下のスペースを削除するにはどうすればよいですか? 各行の下にスペースがあるのはなぜですか? (CSS) 自分のスキルをテストするために Next.js 三目並べアプリを作成しようとしています。ただし、CSSに問題があります。ボード...
から 2024-04-05 11:39:02
0
1
1431
単一のグリッドまたは Flex を使用して多様なカード レイアウトを作成する: 実用的なガイド 写真のようなレスポンシブカードレイアウトを作成しようとしています。私が現在行っているのは、コンピューター、タブレット、モバイル デバイス用に個別のレイアウトを作成することです。次に...
から 2024-04-02 21:07:36
0
2
377
ボタンをアクティブにするとホバー効果が誤動作する 私は Web 開発 (HTML、CSS、JS) の基礎を学ぼうとしているので、動作する Apple 電卓を作ろうとしています。小さなバグに気づくまではすべてが正常に動作していました...
から 2024-04-01 21:51:26
0
1
396
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート