ホームページ ウェブフロントエンド CSSチュートリアル CSSを利用した各種Webアイコンの作成方法例

CSSを利用した各種Webアイコンの作成方法例

Mar 28, 2018 am 10:43 AM
css

この記事では主に、純粋な CSS を使用してさまざまな Web アイコン (三角形、一時停止ボタン、ダウンロード矢印、プラス記号など) を作成するための関連情報を紹介します。編集者はそれが非常に優れていると考えたので、共有します。参考にしてください。皆さんのお役に立てれば幸いです。

三角形


rreee

Parallelogram icon


<p class="box"></p>
<style>
.box{
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 50px solid transparent;
            border-right: 50px solid red;
}
</style>
ログイン後にコピー

一時停止ボタン


<p class="box"></p>
<style>
 .box{
            width: 50px;
            height: 50px;
            margin: 100px auto;
            background-color: red;
            transform: skew(-25deg);
        }
</style>
ログイン後にコピー

一時停止ボタンの実装原則は、次のとおりです。境界線には border を使用し、内側の正方形にはアウトラインを使用します。アウトラインにはオフセットの設定に使用できるオフセット属性があり、比率に基づいているためです。

実は、outline-offsetの値をもう少し小さく設定すると追加後に表示されます

プラス記号


<p class="box"></p>
    <style>
        .box{
            width: 50px;
            height: 50px;
            margin: 100px auto;
            color: #000;
            border: 1px solid;
            border-radius: 50%;
            outline: 10px solid;
            outline-offset: -26px;
        }
    </style>
ログイン後にコピー

もう一度回転させると閉じるボタンになります

閉じるボタン


<p class="box"></p>
<style>
    .box{
        width: 50px;
        height: 50px;
        margin: 100px auto;
        color: #000;
        border: 1px solid;
        border-radius: 50%;
        outline: 10px solid;
        outline-offset: -35px;
    }
</style>
ログイン後にコピー

バーガーボタン


<p class="box"></p>
<style>
    .box{
        width: 50px;
        height: 50px;
        margin: 100px auto;
        color: #000;
        border: 1px solid;
        border-radius: 50%;
        outline: 10px solid;
        outline-offset: -35px;
        transform: rotate(45deg);
    }
ログイン後にコピー

バーガーボタン2:


<p class="box"></p>
<style>
    .box{
        width: 50px;
        height: 0px;
        margin: 100px auto;
        box-shadow: 36px 10px 0 3px red,
        36px 0 0 3px red,
        36px 20px 0 3px red;
    }
</style>
ログイン後にコピー

ラジオボタン

box-shadow は比例して拡大縮小するため、最初の値を白に設定し、2 番目の値を最初の値より大きく設定します


<p class="box"></p>
<style>
    .box{
        width: 30px;
        height: 3px;
        margin: 100px auto;
        padding: 2px 0;
        border-top: 3px solid red;
        border-bottom: 3px solid red;
        background-clip: content-box;
        background-color: red;
    }
</style>
ログイン後にコピー

円の中に十字を入れます


<p class="box"></p>
<style>
    .box{
        width: 30px;
        height: 30px;
        margin: 100px auto;
        background-color: #000;
        border-radius: 50%;
        box-shadow: 0 0 0 5px #fff,0 0 0 10px #000;
    }
</style>
ログイン後にコピー

フィールドアイコン


<p class="box"></p>
<style>
    .box {
        width: 30px;
        height: 30px;
        margin: 100px auto;
        background-color: #000;
        border-radius: 50%;
        box-shadow: 0 0 0 5px #fff, 0 0 0 10px #000;
        outline: 36px solid #fff;
        outline-offset: -50px;
    }
</style>
ログイン後にコピー

矢印をダウンロード

ボーダーを使用して三角形を作成し、ボックスシャドウを使用して正方形を作成します、主にオフセットを使用します


<p class="box"></p>
<style>
    .box {
        width: 0;
        margin: 100px auto;
        border: 3px solid red;
        outline: 6px dotted red;
        outline-offset: 6px;
    }
</style>
ログイン後にコピー

ブックマーク

この効果を実現する原理は、中空の三角形が表示されるように三角形を背景色に設定することです


<p class="box"></p>
<style>
    .box {
        width: 0;
        margin: 100px auto;
        color: red;
        border: 8px solid transparent;
        border-top: 8px solid red;
        box-shadow: 0 -12px 0 -4px;
    }
</style>
ログイン後にコピー

2つの半円アイコン

これは比較的単純で、次のように実装されています。グラデーション関数、そして丸い境界線


<p class="box"></p>
<style>
    .box {
        width: 0;
        height: 8px;
        background-color:orange;
        border: 8px solid transparent;
        border-bottom: 8px solid #fff;
    }
</style>
ログイン後にコピー

アイコンを無効にする

外側の円に丸い境界線を使用し、内側に縦線を作るためにグラデーションを使用し、その後回転を使用するだけです属性


<p class="box"></p>
<style>
    .box {
       width: 50px;
        height: 50px;
        border-radius: 50%;
        background-image: linear-gradient(to right,#ccc 50%,#000 50%);
    }
</style>
ログイン後にコピー

左右の矢印アイコン

三角形は1つ作れるので、三角形は2つ作れます。他のブラウザでは

鷲のくちばしアイコン

<p class="box"></p>
<style>
    .box {
       width: 50px;
        height: 50px;
        border-radius: 50%;
        border:2px solid #000;
        background: linear-gradient(to right,#fff  45%,#000 45%,#000 45%,#fff 55%);
        transform: rotate(40deg);
    }
</style>
ログイン後にコピー

がサポートされていない可能性があるため、

<p class="box"></p>
<style>
    .box {
        width: 0;
        height: 0;
        margin: 100px auto;
        border: 10px solid transparent;
        border-left: 10px solid red;
        -webkit-box-reflect: left 5px;
        box-reflect:left 5px;
    }
</style>
ログイン後にコピー
をChromeブラウザで開く必要があります

以上がCSSを利用した各種Webアイコンの作成方法例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Vue におけるプレースホルダーの意味 Vue におけるプレースホルダーの意味 May 07, 2024 am 09:57 AM

Vue におけるプレースホルダーの意味

vueでスペースを書く方法 vueでスペースを書く方法 Apr 30, 2024 am 05:42 AM

vueでスペースを書く方法

vueでdomを取得する方法 vueでdomを取得する方法 Apr 30, 2024 am 05:36 AM

vueでdomを取得する方法

jsでのスパンの意味は何ですか jsでのスパンの意味は何ですか May 06, 2024 am 11:42 AM

jsでのスパンの意味は何ですか

jsでレムは何を意味しますか jsでレムは何を意味しますか May 06, 2024 am 11:30 AM

jsでレムは何を意味しますか

vueに画像を導入する方法 vueに画像を導入する方法 May 02, 2024 pm 10:48 PM

vueに画像を導入する方法

スパンタグの機能とは何ですか スパンタグの機能とは何ですか Apr 30, 2024 pm 01:54 PM

スパンタグの機能とは何ですか

プロンプトをjsでラップする方法 プロンプトをjsでラップする方法 May 01, 2024 am 06:24 AM

プロンプトをjsでラップする方法

See all articles