要素の周囲に枠線（ボーダー）を付ける際に使用する borderプロパティを利用して三角形を作成し
border-radiusプロパティで四辺を丸め、円形を作ります。ボーダーの太さで、いろいろ.....できます。.
レンタルサーバーheteml
border,border-radiusプロパティで円形を作成
※下記 サンプルコード：HTML
<div class="***"></div> *** に下記コードのクラス名を入れてください。
ボーダーで三角形を作り そのブロック要素を円形に
.bdrSikaku{ /* border で三角形 */
width: 0; height: 0;
border-top: 50px solid #05f;
border-right: 50px solid #0f0;
border-bottom: 50px solid #f0b;
border-left: 50px solid #777;
}
.bdrEn{
width: 0; height: 0;
border-top: 50px solid #05f;
border-right: 50px solid #0f0;
border-bottom: 50px solid #f0b;
border-left: 50px solid #777;
border-radius: 50%;
}
ブロック要素の高さ、幅を無しにしてボーダー幅 (ここでは50px) を設定します。
見易くする為、色を変えてます。各ボーダーが三角形になりました。
これに border-radius: 50%; を設定すると正円形になります。
そして各ボーダーの設定値を変更することでさまざまな円形を描写することができます。。
ボーダーの色は transparent で透明になり、親要素の背景色が透過します。
円形 描画コード
半円形 右上
.bdrEn-MigiUe{
width: 0; height: 0;
border: 50px solid transparent;
border-top: 50px solid #05f;
border-right: 50px solid #0f0;
border-radius: 50%;
}
半円形 左下
.bdrEn-HidariSita{
width: 0; height: 0;
border: 50px solid transparent;
border-bottom: 50px solid #f0b;
border-left: 50px solid #777;
border-radius: 50%;
}
1/4円形 右
.bdrEn-qtrMigi{
width: 0; height: 0;
border: 50px solid transparent;
border-right: 50px solid #0f0;
border-radius: 50%;
}
1/4円形 上
.bdrEn-qtrUe{
width: 0; height: 0;
border: 50px solid transparent;
border-top: 50px solid #05f;
border-radius: 50%;
}
扇形、 1/4円形に高さ、幅を設定して
.bdrEn-Oogi{
width: 60px; height: 60px;
border: 50px solid transparent;
border-top: 50px solid #05f;
border-radius: 50%;
}
★☆★☆★☆ ナウでヤングなレンタルサーバー！ロリポップ！ ☆★☆★☆★
月額１０５円〜容量最大１２０ＧＢ！大人気のWordpressも簡単インストール★
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
パックマン 左向き
.bdrEn-Pacman{
width: 0; height: 0;
border: 50px solid green;
border-left: 50px solid transparent;
border-radius: 50%;
}
パックマン 餌を食べてます。
.pacMan-Esa {
position: relative;
width: 0px; height: 0px;
border-radius: 50%;
border: 50px solid #f0f;
border-right-color: transparent;
}
.pacMan-Esa:after { /* CSS疑似要素 :before / :after */
left: 15px; top: -10px;
position: absolute; content: "";
background-color: blue;
height: 20px; width: 20px;
border-radius: 50%;
box-shadow: 30px 0px 1px 1px black,65px -3px 1px 2px teal;
}
円の外側に ぼかし をいれる。box-shadowプロパティ
.bdrEn-Bokasi{
width: 0; height: 0;
border: 50px solid yellow;
border-radius: 50%;
box-shadow: 0 0 17px 5px #fd6515;
} /* 横方向 縦方向 ぼかし 広がり 影の色; */
ボーダー(擬似的)を付ける。すでにborderを使っているので box-shadowで
.bdrEn-Bdr{
width: 0; height: 0;
border: 50px solid yellow;
border-radius: 50%;
box-shadow: 0 0 0 5px #fd6515;
}
楕円形
.Daen{
width: 0; height: 0;
border-top: 100px solid #05f;
border-right: 50px solid #0f0;
border-bottom: 100px solid #f0b;
border-left: 50px solid #f63;
border-radius: 50%;
}
横向き 楕円形
.DaenYoko{
width: 380px; height: 30px;
border-top: 20px solid #118aff;
border-right: 80px solid #66ff66;
border-bottom: 20px solid #ff6ca3;
border-left: 80px solid #fe9900;
border-radius: 50%;
}
楕円形 'つ'の字ボーダー
.daEnBdr{
height:100px;
width:200px;
border-radius: 50%;
border-top:10px solid red;
border-right:10px solid red;
}
- ★月々100円（税抜）からオンラインショップを運営！
独自SSL・高機能カート・クレジット決済が簡単導入
- コロリポプラン 詳細はこちら
- WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
- border-radiusプロパティ
- borderプロパティ
- border-styleプロパティ
- box-shadowプロパティ
- marginプロパティ
- paddingプロパティ
- CSS疑似要素 :before / :after
- スタイルシートだけでポップアップメニュー、補足説明文を表示します。
- CSSで作る吹き出しボックス,サンプル
- リボンのような見出しをCSSで表示
- 三角形を CSS で作る
- 文字の色,背景色の色の組み合わせのチェック
- Web Safeカラー 216色
- linear-gradient()関数 css3
