コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
目次
Square(正方形)
Rectangle(長方形)
Circle(円)
Oval(楕円形)
ホームページ ウェブフロントエンド htmlチュートリアル 純粋な CSS でさまざまなグラフィックを作成する (マルチピクチャ警告)_html/css_WEB-ITnose

純粋な CSS でさまざまなグラフィックを作成する (マルチピクチャ警告)_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Jun 21, 2016 am 09:12 AM

今日海外のウェブサイト（The Shapes of CSS）で見ましたが、それほど複雑ではありません〜しっかり考えてください〜〜

。

Square(正方形)

#square {    width: 100px;    height: 100px;    background: red;}
ログイン後にコピー

Rectangle(長方形)

#rectangle {    width: 200px;    height: 100px;    background: red;}
ログイン後にコピー

Circle(円)

#circle {    width: 100px;    height: 100px;    background: red;    -moz-border-radius: 50px;    -webkit-border-radius: 50px;    border-radius: 50px;}/* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */
ログイン後にコピー

Oval(楕円形)

#oval {    width: 200px;    height: 100px;    background: red;    -moz-border-radius: 100px / 50px;    -webkit-border-radius: 100px / 50px;    border-radius: 100px / 50px;}/* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */
ログイン後にコピー
Up(上向き三角形)

#triangle-up {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-bottom: 100px solid red;}
ログイン後にコピー

Triangle Down (下) 

#triangle-down {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-top: 100px solid red;}
ログイン後にコピー

三角形左(左)

#triangle-left {    width: 0;    height: 0;    border-top: 50px solid transparent;    border-right: 100px solid red;    border-bottom: 50px solid transparent;}
ログイン後にコピー

三角形右(右)

#triangle-right {    width: 0;    height: 0;    border-top: 50px solid transparent;    border-left: 100px solid red;    border-bottom: 50px solid transparent;}
ログイン後にコピー

三角形左上(左上)

#triangle-topleft {    width: 0;    height: 0;    border-top: 100px solid red;    border-right: 100px solid transparent;}
ログイン後にコピー

三角形右上(右上) 

#triangle-topright {    width: 0;    height: 0;    border-top: 100px solid red;    border-left: 100px solid transparent;}
ログイン後にコピー

Triangle Bottom Left(左下)

#triangle-bottomleft {    width: 0;    height: 0;    border-bottom: 100px solid red;    border-right: 100px solid transparent;}
ログイン後にコピー

Triangle Bottom Right(右下)

#triangle-bottomright {    width: 0;    height: 0;    border-bottom: 100px solid red;    border-left: 100px solid transparent;}
ログイン後にコピー

Curved Tail Arrow(湾曲した尾の矢印)

rotate() の値を変更することで、さまざまな方向を形成できます#curvedarrow

#curvedarrow {  position: relative;  width: 0;  height: 0;  border-top: 9px solid transparent;  border-right: 9px solid red;  -webkit-transform: rotate(10deg);  -moz-transform: rotate(10deg);  -ms-transform: rotate(10deg);  -o-transform: rotate(10deg);}#curvedarrow:after {  content: "";  position: absolute;  border: 0 solid transparent;  border-top: 3px solid red;  border-radius: 20px 0 0 0;  top: -12px;  left: -9px;  width: 12px;  height: 12px;  -webkit-transform: rotate(45deg);  -moz-transform: rotate(45deg);  -ms-transform: rotate(45deg);  -o-transform: rotate(45deg);}
ログイン後にコピー

Trapezoid(台形)

#trapezoid {    border-bottom: 100px solid red;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    height: 0;    width: 100px;}
ログイン後にコピー

Parallelogram(平行線)

#parallelogram {    width: 150px;    height: 100px;    -webkit-transform: skew(20deg);       -moz-transform: skew(20deg);         -o-transform: skew(20deg);    background: red;}
ログイン後にコピー

Star (6-points)(six-pointed star)

#star-six {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-bottom: 100px solid red;    position: relative;}#star-six:after {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-top: 100px solid red;    position: absolute;    content: "";    top: 30px;    left: -50px;}
ログイン後にコピー

Star (5-point) (5-尖った星)

#star-five {   margin: 50px 0;   position: relative;   display: block;   color: red;   width: 0px;   height: 0px;   border-right:  100px solid transparent;   border-bottom: 70px  solid red;   border-left:   100px solid transparent;   -moz-transform:    rotate(35deg);   -webkit-transform: rotate(35deg);   -ms-transform:     rotate(35deg);   -o-transform:      rotate(35deg);}#star-five:before {   border-bottom: 80px solid red;   border-left: 30px solid transparent;   border-right: 30px solid transparent;   position: absolute;   height: 0;   width: 0;   top: -45px;   left: -65px;   display: block;   content: '';   -webkit-transform: rotate(-35deg);   -moz-transform:    rotate(-35deg);   -ms-transform:     rotate(-35deg);   -o-transform:      rotate(-35deg);}#star-five:after {   position: absolute;   display: block;   color: red;   top: 3px;   left: -105px;   width: 0px;   height: 0px;   border-right: 100px solid transparent;   border-bottom: 70px solid red;   border-left: 100px solid transparent;   -webkit-transform: rotate(-70deg);   -moz-transform:    rotate(-70deg);   -ms-transform:     rotate(-70deg);   -o-transform:      rotate(-70deg);   content: '';}
ログイン後にコピー

Pentagon(五角形)

#pentagon {    position: relative;    width: 54px;    border-width: 50px 18px 0;    border-style: solid;    border-color: red transparent;}#pentagon:before {    content: "";    position: absolute;    height: 0;    width: 0;    top: -85px;    left: -18px;    border-width: 0 45px 35px;    border-style: solid;    border-color: transparent transparent red;}
ログイン後にコピー

Hexagon(六角形)

#hexagon {    width: 100px;    height: 55px;    background: red;    position: relative;}#hexagon:before {    content: "";    position: absolute;    top: -25px;    left: 0;    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-bottom: 25px solid red;}#hexagon:after {    content: "";    position: absolute;    bottom: -25px;    left: 0;    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-top: 25px solid red;}
ログイン後にコピー

Octagon(八角形)

<br />#octagon {    width: 100px;    height: 100px;    background: red;    position: relative;}#octagon:before {    content: "";    position: absolute;    top: 0;    left: 0;    border-bottom: 29px solid red;    border-left: 29px solid #eee;    border-right: 29px solid #eee;    width: 42px;    height: 0;}#octagon:after {    content: "";    position: absolute;    bottom: 0;    left: 0;    border-top: 29px solid red;    border-left: 29px solid #eee;    border-right: 29px solid #eee;    width: 42px;    height: 0;}
ログイン後にコピー

Heart(ハート型) 

#heart {    position: relative;    width: 100px;    height: 90px;}#heart:before,#heart:after {    position: absolute;    content: "";    left: 50px;    top: 0;    width: 50px;    height: 80px;    background: red;    -moz-border-radius: 50px 50px 0 0;    border-radius: 50px 50px 0 0;    -webkit-transform: rotate(-45deg);       -moz-transform: rotate(-45deg);        -ms-transform: rotate(-45deg);         -o-transform: rotate(-45deg);            transform: rotate(-45deg);    -webkit-transform-origin: 0 100%;       -moz-transform-origin: 0 100%;        -ms-transform-origin: 0 100%;         -o-transform-origin: 0 100%;            transform-origin: 0 100%;}#heart:after {    left: 0;    -webkit-transform: rotate(45deg);       -moz-transform: rotate(45deg);        -ms-transform: rotate(45deg);         -o-transform: rotate(45deg);            transform: rotate(45deg);    -webkit-transform-origin: 100% 100%;       -moz-transform-origin: 100% 100%;        -ms-transform-origin: 100% 100%;         -o-transform-origin: 100% 100%;            transform-origin :100% 100%;}
ログイン後にコピー

Infinity(無限大記号) 

#infinity {    position: relative;    width: 212px;    height: 100px;}#infinity:before,#infinity:after {    content: "";    position: absolute;    top: 0;    left: 0;    width: 60px;    height: 60px;    border: 20px solid red;    -moz-border-radius: 50px 50px 0 50px;         border-radius: 50px 50px 0 50px;    -webkit-transform: rotate(-45deg);       -moz-transform: rotate(-45deg);        -ms-transform: rotate(-45deg);         -o-transform: rotate(-45deg);            transform: rotate(-45deg);}#infinity:after {    left: auto;    right: 0;    -moz-border-radius: 50px 50px 50px 0;         border-radius: 50px 50px 50px 0;    -webkit-transform: rotate(45deg);       -moz-transform: rotate(45deg);        -ms-transform: rotate(45deg);         -o-transform: rotate(45deg);            transform: rotate(45deg);}
ログイン後にコピー

ダイヤモンドスクエア(ひし形)

#diamond {    width: 0;    height: 0;    border: 50px solid transparent;    border-bottom-color: red;    position: relative;    top: -50px;}#diamond:after {    content: '';    position: absolute;    left: -50px;    top: 50px;    width: 0;    height: 0;    border: 50px solid transparent;    border-top-color: red;}
ログイン後にコピー

ダイヤモンドシールド

#diamond-shield {    width: 0;    height: 0;    border: 50px solid transparent;    border-bottom: 20px solid red;    position: relative;    top: -50px;}#diamond-shield:after {    content: '';    position: absolute;    left: -50px; top: 20px;    width: 0;    height: 0;    border: 50px solid transparent;    border-top: 70px solid red;}
ログイン後にコピー

ダイヤモンドナロー

#diamond-narrow {    width: 0;    height: 0;    border: 50px solid transparent;    border-bottom: 70px solid red;    position: relative;    top: -50px;}#diamond-narrow:after {    content: '';    position: absolute;    left: -50px; top: 70px;    width: 0;    height: 0;    border: 50px solid transparent;    border-top: 70px solid red;}
ログイン後にコピー

カットダイヤモンド(石積み形状) 

#cut-diamond {    border-style: solid;    border-color: transparent transparent red transparent;    border-width: 0 25px 25px 25px;    height: 0;    width: 50px;    position: relative;    margin: 20px 0 50px 0;}#cut-diamond:after {    content: "";    position: absolute;    top: 25px;    left: -25px;    width: 0;    height: 0;    border-style: solid;    border-color: red transparent transparent transparent;    border-width: 70px 50px 0 50px;}
ログイン後にコピー

E gg(egg)

#egg {   display:block;   width: 126px;   height: 180px;   background-color: red;   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;   border-radius:         50%  50%  50%  50%  / 60%   60%   40%  40%;}
ログイン後にコピー

Pac-Man (パックマン)

#pacman {  width: 0px;  height: 0px;  border-right: 60px solid transparent;  border-top: 60px solid red;  border-left: 60px solid red;  border-bottom: 60px solid red;  border-top-left-radius: 60px;  border-top-right-radius: 60px;  border-bottom-left-radius: 60px;  border-bottom-right-radius: 60px;}
ログイン後にコピー

トークバブル

#talkbubble {   width: 120px;   height: 80px;   background: red;   position: relative;   -moz-border-radius:    10px;   -webkit-border-radius: 10px;   border-radius:         10px;}#talkbubble:before {   content:"";   position: absolute;   right: 100%;   top: 26px;   width: 0;   height: 0;   border-top: 13px solid transparent;   border-right: 26px solid red;   border-bottom: 13px solid transparent;}
ログイン後にコピー

12ポイントバースト

#burst-12 {    background: red;    width: 80px;    height: 80px;    position: relative;    text-align: center;}#burst-12:before, #burst-12:after {    content: "";    position: absolute;    top: 0;    left: 0;    height: 80px;    width: 80px;    background: red;}#burst-12:before {    -webkit-transform: rotate(30deg);       -moz-transform: rotate(30deg);        -ms-transform: rotate(30deg);         -o-transform: rotate(30deg);}#burst-12:after {    -webkit-transform: rotate(60deg);       -moz-transform: rotate(60deg);        -ms-transform: rotate(60deg);         -o-transform: rotate(60deg);}
ログイン後にコピー

8ポイントバースト

#burst-8 {    background: red;    width: 80px;    height: 80px;    position: relative;    text-align: center;    -webkit-transform: rotate(20deg);       -moz-transform: rotate(20deg);        -ms-transform: rotate(20deg);         -o-transform: rotate(20eg);}#burst-8:before {    content: "";    position: absolute;    top: 0;    left: 0;    height: 80px;    width: 80px;    background: red;    -webkit-transform: rotate(135deg);       -moz-transform: rotate(135deg);        -ms-transform: rotate(135deg);         -o-transform: rotate(135deg);}
ログイン後にコピー

陰陽（陰陽図） )

りー

バッジリボン(バッジリボン)🎝 Facebookアイコン

#yin-yang {    width: 96px;    height: 48px;    background: #eee;    border-color: red;    border-style: solid;    border-width: 2px 2px 50px 2px;    border-radius: 100%;    position: relative;}#yin-yang:before {    content: "";    position: absolute;    top: 50%;    left: 0;    background: #eee;    border: 18px solid red;    border-radius: 100%;    width: 12px;    height: 12px;}#yin-yang:after {    content: "";    position: absolute;    top: 50%;    left: 50%;    background: red;    border: 18px solid #eee;    border-radius:100%;    width: 12px;    height: 12px;}
ログイン後にコピー

Cone(円錐)

#badge-ribbon { position: relative; background: red; height: 100px; width: 100px; -moz-border-radius:    50px; -webkit-border-radius: 50px; border-radius:         50px;}#badge-ribbon:before,#badge-ribbon:after {  content: '';  position: absolute;  border-bottom: 70px solid red;  border-left: 40px solid transparent;  border-right: 40px solid transparent;  top: 70px;  left: -10px;  -webkit-transform: rotate(-140deg);  -moz-transform:    rotate(-140deg);  -ms-transform:     rotate(-140deg);  -o-transform:      rotate(-140deg);}#badge-ribbon:after {  left: auto;  right: -10px;  -webkit-transform: rotate(140deg);  -moz-transform:    rotate(140deg);  -ms-transform:     rotate(140deg);  -o-transform:      rotate(140deg);}
ログイン後にコピー

Moon(月)

#space-invader{  box-shadow:    0 0 0 1em red,    0 1em 0 1em red,    -2.5em 1.5em 0 .5em red,    2.5em 1.5em 0 .5em red,    -3em -3em 0 0 red,    3em -3em 0 0 red,    -2em -2em 0 0 red,    2em -2em 0 0 red,    -3em -1em 0 0 red,    -2em -1em 0 0 red,    2em -1em 0 0 red,    3em -1em 0 0 red,    -4em 0 0 0 red,    -3em 0 0 0 red,    3em 0 0 0 red,    4em 0 0 0 red,    -5em 1em 0 0 red,    -4em 1em 0 0 red,    4em 1em 0 0 red,    5em 1em 0 0 red,    -5em 2em 0 0 red,    5em 2em 0 0 red,    -5em 3em 0 0 red,    -3em 3em 0 0 red,    3em 3em 0 0 red,    5em 3em 0 0 red,    -2em 4em 0 0 red,    -1em 4em 0 0 red,    1em 4em 0 0 red,    2em 4em 0 0 red;    background: red;    width: 1em;    height: 1em;    overflow: hidden;    margin: 50px 0 70px 65px;  }
ログイン後にコピー

Flag

#tv {  position: relative;  width: 200px;  height: 150px;  margin: 20px 0;  background: red;  border-radius: 50% / 10%;  color: white;  text-align: center;  text-indent: .1em;}#tv:before {  content: '';  position: absolute;  top: 10%;  bottom: 10%;  right: -5%;  left: -5%;  background: inherit;  border-radius: 5% / 50%;}
ログイン後にコピー
Cross

りー

ベース

りー

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定
1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
2週間前 By DDD
R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.チャットコマンドとそれらの使用方法
1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7533
15
CakePHP チュートリアル
1379
52
Steamのアカウント名の形式は何ですか
82
11
Win11 Activation Key Permanent
55
19
NYTの接続はヒントと回答です
21
86
もっと見る
Related knowledge
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？ HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？ Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

＆lt; Progress＆gt;の目的は何ですか 要素？ ＆lt; Progress＆gt;の目的は何ですか 要素？ Mar 21, 2025 pm 12:34 PM

この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合

＆lt; datalist＆gt;の目的は何ですか 要素？ ＆lt; datalist＆gt;の目的は何ですか 要素？ Mar 21, 2025 pm 12:33 PM

この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？ HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？ Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

＆lt; meter＆gt;の目的は何ですか 要素？ ＆lt; meter＆gt;の目的は何ですか 要素？ Mar 21, 2025 pm 12:35 PM

この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex

ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？ ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？ Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？ ＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？ Mar 20, 2025 pm 06:05 PM

この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

HTMLは初心者のために簡単に学ぶことができますか？ HTMLは初心者のために簡単に学ぶことができますか？ Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

See all articles