コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > css_html/css_WEB-ITnoseで作った丸、三角、楕円、矢印のアイコン

css_html/css_WEB-ITnoseで作った丸、三角、楕円、矢印のアイコン

WBOY
リリース： 2016-06-24 11:22:14
オリジナル
1412 人が閲覧しました

CSS3 のリリース以降、これまで画像が必要だった多くのアイコンが、わずか数個の CSS コードで完成できるようになりました。以下はCSSで作成した丸、楕円、三角、矢印のアイコンです。

円:

rree



楕円 

.yuan{    width:100px;    height:100px;    -moz-border-radius:50%;     -webkit-border-radius:50%;     border-radius:50%;     background-color:red;}<div class="yuan"></div>
ログイン後にコピー



矢印: 

.oval {     width: 200px;     height: 100px;     background-color: red;     -moz-border-radius: 100px / 50px;     -webkit-border-radius: 100px / 50px;     border-radius: 100px / 50px; }<div class="oval"></div>
ログイン後にコピー



Triangle: 

.arrow{    content: '';    position: absolute;    width: 30px;    height: 30px;    border: 10px solid #f5b24a;    -webkit-transform: rotate(-135deg);    -moz-transform: rotate(-135deg);    -o-transform: rotate(-135deg);    -ms-transform: rotate(-135deg);    transform: rotate(-135deg);    border-top: none;    border-right: none;    top: 9px;}<span class="arrow"></span>
ログイン後にコピー

この記事は からの転載です: http://www.manongjc.com/article/57.html

CSSでのパターン作成に関するその他の記事:

CSS borderで実装された三角形パターン

CSSはborder属性を上手に使って様々なグラフィックス(長方形、台形)を作成します、トライアングル）

circle、triangle、ellipse、矢印のアイコンは、csss

css3ボーダーラジウス丸い角のボックスで作られています。

関連ラベル：
css制作的圆，三角形，椭圆，箭头图标
ソース：php.cn
前の記事：CSS 旧バージョン flex と互換性_html/css_WEB-ITnose 次の記事：Index.css ファイル これらのコードを表示_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2209
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2360
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1974
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1860
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1925
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート