DIV 要素にborderプロパティと border-radiusプロパティを設定してリングを生成し、 :before擬似要素 / :after擬似要素で五輪マークの輪の外周,内周を白で縁取っています。
オリンピックマーク（五輪マーク）をCSSで描いてみました。
マルチドメイン、マルチデータベース、共有 SSL など多彩な機能と 256ＧＢの大容量なサーバー環境が
月額1,000円（税抜）〜！ ホームページつくるならレンタルサーバー 『ヘテムル』
サンプルソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSで描くオリンピックマーク（五輪マーク）</title>
<style>
.gorinWrap{
position: relative; /* 相対配置（相対位置）*/
height: 240px;width:500px;
border: 1px solid #000;
}
/* --- 全ての輪の基本,設定 ---*/
.gorinBox{
margin-top:5px; margin-left:45px;
position: absolute; /* 絶対配置 */
height:100px; width:100px;
border:15px solid transparent;
border-radius:50%;
}
/* ----- 青の輪 ----- */
.blueWa{
z-index: 0;/* 要素の重なり順序 */
top:20px; left:0px;/* 親要素からの距離 top,left,bottom,right プロパティ*/
border-color: blue;
}
.blueCover{
/* 青の輪 右側,を橙の上に */
z-index: 40;/* 要素の重なり順序 橙は z-index: 30;*/
top:20px; left:0px;
border-right-color: blue;
}
/*----- 橙の輪 黒い輪の上へ -----*/
.orangeWa, .orangeCover{
z-index: 30;
top:80px; left:70px;
border-color: orange;
}
.orangeCover{ /* 橙の輪 上側 */
border-top-color: orange;
}
/*----- 黒の輪 -----*/
.blackWa{
z-index: 20;
top:20px; left:140px;
border-color: black;
}
.blackCover{ /* 黒の輪 下側,を橙の上に */
z-index: 40;
top:20px; left:140px;
border-bottom-color: black;
border-right-color: black;
}
/*----- 緑の輪 -----*/
.greenWa{
z-index: 20;
top:80px; left:210px;
border-color: green;
}
.greenCover{ /* 緑の輪 左側を黒の上に */
z-index: 50;
top:80px; left:210px;
border-left-color: green;
}
/*----- 赤の輪 緑の下へ -----*/
.redWa{
z-index: 10;
top:20px; left:280px;
border-color: red;
}
.redCover{ /*赤の輪,下側を緑の上に*/
z-index: 20;
top:20px; left:280px;
border-bottom-color: red;
}
/*--- 全ての輪の 縁取り(外周,内周) 共通コード ---*/
.gorinBox:before, .gorinBox:after{/* :before擬似要素 / :after擬似要素 */
content: "";
position: absolute;
border:3px solid transparent;
border-radius:50%;
}
.gorinBox:before{
/* 全ての輪の外周 */
top:-18px; left:-18px;
height:130px; width:130px;
}
.gorinBox:after{
/* 全ての輪の内周 */
top:0px; left:0px;
height:94px; width:94px;
}
.blueCover:before, .blueCover:after{
/* 青の輪 縁取り,右側 */
border-right:3px solid #fff;
}
.orangeCover:before, .orangeCover:after{
/* 橙の輪 縁取り */
border:3px solid #fff;
}
.blackCover:before, .blackCover:after{
/* 黒の輪 縁取り,下側 右側*/
border-bottom:3px solid #fff;
border-right:3px solid #fff;
}
.blackCover:after{
/* 黒の輪 縁取り,内周左側を透過 */
border-left:3px solid transparent;
}
.greenWa:before, .greenWa:after{
/* 緑の輪 縁取り,上側 */
border-top:3px solid #fff;
}
.greenCover:before, .greenCover:after{
/* 緑の輪 縁取り,左側 */
border-left:3px solid #fff;
}
.redCover:before, .redCover:after{
/*赤の輪 縁取り,下側*/
border-bottom:3px solid #fff;
}
</style>
</head>
<body>
<div class="gorinWrap">
<div class="gorinBox blueWa"></div>
<div class="gorinBox blueCover"></div>
<div class="gorinBox orangeWa"></div>
<div class="gorinBox orangeCover"></div>
<div class="gorinBox blackWa"></div>
<div class="gorinBox blackCover"></div>
<div class="gorinBox greenWa"></div>
<div class="gorinBox greenCover"></div>
<div class="gorinBox redWa"></div>
<div class="gorinBox redCover"></div>
</div>
</body>
</html>
リングとリングの重なり,絡み合いの表現方法
DIV要素で作った円に位置を指定して重ねると上のように青の上に橙、その上に黒と、順に重なり、後になるほど前面に表示されます。
でも五輪マークは輪を五個、並べて重ねるだけではなく、輪が全て絡み合うように 作成しなければなりません。
たとえば青色のリングでは右側のボーダーを上書きして(.blueCover)、橙の上に持ってくることで橙が下を潜っているように見せています。
他も同様にクラス名 .***Cover で重なり、絡みを表現しています。
輪が太く,色を少し淡くした五輪マーク
/*----- HTML -----*/
<div class="gorin20">
<span></span>
</div>
/*----- CSS -----*/
.gorin20{ /* 基点になる輪 blue */
margin:10px;
position : relative;
height:20px; width:20px;
border-radius:50%;
border:20px solid #09c;
}
.gorin20:before, .gorin20:after,
.gorin20 span:before, .gorin20 span:after{
/* 共用コード */
content: "";
position: absolute;
display:block;
height:20px; width:20px;
border-radius:50%;
}
.gorin20:before{ /* 橙 */
top:8px; left:9px;
border:20px solid #fc0;
}
.gorin20:after{ /* 黒 */
top:-20px; left:38px;
border:20px solid #000;
}
.gorin20 span:before{ /* 緑 */
top:8px; left:66px; z-index:1;
border:20px solid #093;
}
.gorin20 span:after{ /* 赤 */
top:-20px; left:94px; z-index:1;
border:20px solid #f03;
}
五輪マーク 輪の配置
blue の輪に
position: relative;を、残り４つの輪に position: absolute; を設定します。 これで blue の輪を基点にして配置する事ができます。 配置位置の指定は top,left,bottom,rightプロパティで行います。
:before擬似要素 :after擬似要素
:before及び:after擬似要素は 対象要素内の先頭 / 末尾にコンテンツを追加します。
これを<div>,<span>要素に指定して４ツの輪を追加しています。
CSS疑似要素 :before / :after
- WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
- ★月々100円（税抜）からオンラインショップを運営！
独自SSL・高機能カート・クレジット決済が簡単導入
- コロリポプラン 詳細はこちら
- CSS positionプロパティ
- marginプロパティ
- CSS疑似要素 :before / :after
- リボンのような見出しをCSSで表示
- 三角形を CSS で作る
- CSSで作る吹き出しボックス,サンプル
- borderプロパティで円形、楕円形、半円、etc
- 三角形を CSS で作る
- border-radiusプロパティ
- box-shadowプロパティ
- z-indexプロパティ テーブル（表）のセルを重ね、ずらして表示します。
- border-styleプロパティ
- スタイルシートだけでポップアップメニュー、補足説明文を表示します。
- スタイルシート css を使った横並びリストメニュー
- display プロパティ
- overflow プロパティ
- linear-gradient()関数 css3
タグ：css 五輪マーク
