CSSで描く古墳
投稿日：2020年2月2日
はじめに
ネタです（断言）。
今後、どこかで使うことがあるかもしれません・・・。
「ああっ、CSSで古墳を描きたい！！！」という時が来るかもしれません・・・。
そんな時、このページを思い出してください。
きっとあなたのお役に立つことでしょう。
※ここで公開されてれいるcss（Sass）は、ご自由にお使いください。改変も自由です。使用申請も連絡も不要です。
※一部のウェブブラウザでは表示が崩れるかもしれません。（未調査です）
目次
もうちょっと解説
ウェブサイト制作時、ページを装飾するために使う「CSS」。
文字の色を変えたり、余白を調整したり、簡単な図形を描いたり・・・、まぁいろいろできます。
今日の朝起きてワタクシ思いました。
「あれっ、もしかしてこれで古墳を描けるのでは・・・？」
・・・今回の投稿のきっかけです。（謎の使命感）
とりあえず、古墳と円筒埴輪をいくつか作ってみましたが、まだまだ作れそうですね。
そのうちコソッと追加しときます。
以下、サンプルとソースコードです。
ページ下部にはSass（SCSS記法）のソースもありますよ。
CSSで描く古墳：サンプル
円墳
/*=========================================
円墳
=========================================*/
.enpun {
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
楕円形墳
/*=========================================
楕円形墳
=========================================*/
.daenkeifun {
display: block;
box-sizing: border-box;
width: 130px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
方墳
/*=========================================
方墳
=========================================*/
.hofun {
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
background-color: #43c062;
}
長方形墳
/*=========================================
長方形墳
=========================================*/
.chohokeifun {
display: block;
box-sizing: border-box;
width: 130px;
height: 70px;
background-color: #43c062;
}
前方後円墳-前期
/*=========================================
前方後円墳-前期
=========================================*/
.zenpokoenfun-zenki {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
.zenpokoenfun-zenki::before {
position: absolute;
top: 40px;
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 0 35px 125px 35px;
border-style: solid;
border-color: transparent transparent #43c062 transparent;
}
前方後円墳-中期
/*=========================================
前方後円墳-中期
=========================================*/
.zenpokoenfun-chuki {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
.zenpokoenfun-chuki::before {
position: absolute;
top: 55px;
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 0 50px 110px 50px;
border-style: solid;
border-color: transparent transparent #43c062 transparent;
}
前方後円墳-後期
/*=========================================
前方後円墳-後期
=========================================*/
.zenpokoenfun-kouki {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
.zenpokoenfun-kouki::before {
position: absolute;
top: 40px;
left: -10px;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
content: "";
border-width: 0 60px 125px 60px;
border-style: solid;
border-color: transparent transparent #43c062 transparent;
}
前方後円墳-撥形
/*=========================================
前方後円墳-撥形
=========================================*/
.zenpokoenfun-bachigata {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
.zenpokoenfun-bachigata::before {
position: absolute;
top: 0;
right: 0;
display: block;
box-sizing: border-box;
width: 50px;
height: 165px;
content: "";
background: radial-gradient(ellipse at top -140px right -25px, transparent, transparent 80px, #43c062 72px);
}
.zenpokoenfun-bachigata::after {
position: absolute;
top: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 50px;
height: 165px;
content: "";
background: radial-gradient(ellipse at top -140px left -25px, transparent, transparent 80px, #43c062 72px);
}
前方後円墳-剣菱形
/*=========================================
前方後円墳-剣菱形
=========================================*/
.zenpokoenfun-kenbishi {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
.zenpokoenfun-kenbishi::before {
position: absolute;
top: 55px;
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 0 50px 110px 50px;
border-style: solid;
border-color: transparent transparent #43c062 transparent;
}
.zenpokoenfun-kenbishi::after {
position: absolute;
top: calc(100% + 65px);
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 10px 50px 0 50px;
border-style: solid;
border-color: #43c062 transparent transparent transparent;
}
前方後円墳-柄鏡式
/*=========================================
前方後円墳-柄鏡式
=========================================*/
.zenpokoenfun-ekagami {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
.zenpokoenfun-ekagami::before {
position: absolute;
top: 90px;
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 40px;
height: 75px;
margin-right: auto;
margin-left: auto;
content: "";
background-color: #43c062;
}
前方後円墳-帆立貝式
/*=========================================
前方後円墳-帆立貝式
=========================================*/
.zenpokoenfun-hotategai {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
margin-bottom: 25px;
border-radius: 50%;
background-color: #43c062;
}
.zenpokoenfun-hotategai::before {
position: absolute;
top: 0;
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 0 35px 125px 35px;
border-style: solid;
border-color: transparent transparent #43c062 transparent;
}
前方後円墳-造出し右
/*=========================================
前方後円墳-造出し右
=========================================*/
.zenpokoenfun-tsukuridashi-r {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
.zenpokoenfun-tsukuridashi-r::before {
position: absolute;
top: 55px;
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 0 50px 110px 50px;
border-style: solid;
border-color: transparent transparent #43c062 transparent;
}
.zenpokoenfun-tsukuridashi-r::after {
position: absolute;
top: 89px;
right: 0;
left: 56px;
display: block;
box-sizing: border-box;
width: 25px;
height: 26px;
margin-right: auto;
margin-left: auto;
content: "";
background-color: #43c062;
}
前方後円墳-造出し左
/*=========================================
前方後円墳-造出し左
=========================================*/
.zenpokoenfun-tsukuridashi-l {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
.zenpokoenfun-tsukuridashi-l::before {
position: absolute;
top: 55px;
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 0 50px 110px 50px;
border-style: solid;
border-color: transparent transparent #43c062 transparent;
}
.zenpokoenfun-tsukuridashi-l::after {
position: absolute;
top: 89px;
right: 56px;
left: 0;
display: block;
box-sizing: border-box;
width: 25px;
height: 26px;
margin-right: auto;
margin-left: auto;
content: "";
background-color: #43c062;
}
前方後円墳-造出し両方
/*=========================================
前方後円墳-造出し両方
=========================================*/
.zenpokoenfun-tsukuridashi {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
.zenpokoenfun-tsukuridashi::before {
position: absolute;
top: 55px;
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 0 50px 110px 50px;
border-style: solid;
border-color: transparent transparent #43c062 transparent;
}
.zenpokoenfun-tsukuridashi::after {
position: absolute;
top: 89px;
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 84px;
height: 26px;
margin-right: auto;
margin-left: auto;
content: "";
background-color: #43c062;
}
前方後方墳
/*=========================================
前方後方墳
=========================================*/
.zenpokohofun {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
background-color: #43c062;
}
.zenpokohofun::before {
position: absolute;
top: 55px;
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 0 50px 110px 50px;
border-style: solid;
border-color: transparent transparent #43c062 transparent;
}
双方中円墳1
/*=========================================
双方中円墳1
=========================================*/
.sohochuenfun-1 {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
.sohochuenfun-1::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: -30px;
display: block;
box-sizing: border-box;
width: 160px;
height: 50px;
margin: auto;
content: "";
background-color: #43c062;
}
双方中円墳2
/*=========================================
双方中円墳2
=========================================*/
.sohochuenfun-2 {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
.sohochuenfun-2::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: -40px;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin: auto;
content: "";
border-width: 40px 0 40px 120px;
border-style: solid;
border-color: transparent transparent transparent #43c062;
}
.sohochuenfun-2::after {
position: absolute;
top: 0;
right: -40px;
bottom: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin: auto;
content: "";
border-width: 40px 120px 40px 0;
border-style: solid;
border-color: transparent #43c062 transparent transparent;
}
双方中方墳
/*=========================================
双方中方墳
=========================================*/
.sohochuhofun {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
background-color: #43c062;
}
.sohochuhofun::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: -40px;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin: auto;
content: "";
border-width: 30px 0 30px 120px;
border-style: solid;
border-color: transparent transparent transparent #43c062;
}
.sohochuhofun::after {
position: absolute;
top: 0;
right: -40px;
bottom: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin: auto;
content: "";
border-width: 30px 120px 30px 0;
border-style: solid;
border-color: transparent #43c062 transparent transparent;
}
双円墳
/*=========================================
双円墳
=========================================*/
.soenfun {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
.soenfun::before {
position: absolute;
top: 70px;
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 80px;
height: 80px;
margin-right: auto;
margin-left: auto;
content: "";
border-radius: 50%;
background-color: #43c062;
}
六角形墳
/*=========================================
六角形墳
=========================================*/
.rokkakkeifun {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 58px;
background-color: #43c062;
}
.rokkakkeifun::before {
position: absolute;
top: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 100%;
height: 100%;
content: "";
transform: rotate(60deg);
background-color: #43c062;
}
.rokkakkeifun::after {
position: absolute;
top: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 100%;
height: 100%;
content: "";
transform: rotate(-60deg);
background-color: #43c062;
}
八角形墳
/*=========================================
八角形墳
=========================================*/
.hakkakkeifun {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 42px;
background-color: #43c062;
}
.hakkakkeifun::before {
position: absolute;
top: -29px;
left: 0;
display: block;
box-sizing: content-box;
width: 42px;
height: 0;
content: "";
border-width: 0 29px 29px 29px;
border-style: solid;
border-color: transparent transparent #43c062 transparent;
}
.hakkakkeifun::after {
position: absolute;
bottom: -29px;
left: 0;
display: block;
box-sizing: content-box;
width: 42px;
height: 0;
content: "";
border-width: 29px 29px 0 29px;
border-style: solid;
border-color: #43c062 transparent transparent transparent;
}
四隅突出型墳丘墓
/*=========================================
四隅突出型墳丘墓
=========================================*/
.yosumitosshutsu {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
background-color: #43c062;
}
.yosumitosshutsu::before {
position: absolute;
top: 35px;
left: -35px;
display: block;
box-sizing: border-box;
width: 170px;
height: 30px;
content: "";
transform: rotate(45deg);
border-radius: 42%;
background-color: #43c062;
}
.yosumitosshutsu::after {
position: absolute;
top: 35px;
left: -35px;
display: block;
box-sizing: border-box;
width: 170px;
height: 30px;
content: "";
transform: rotate(-45deg);
border-radius: 42%;
background-color: #43c062;
}
円筒埴輪
/*=========================================
円筒埴輪
=========================================*/
.entohaniwa {
position: relative;
box-sizing: border-box;
width: 80px;
height: 0;
border-top: 140px solid #deb887;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
.entohaniwa::before {
position: absolute;
bottom: calc(100% + 80px);
left: -6px;
box-sizing: border-box;
width: 80px;
height: 32px;
content: "";
border-top: 3px solid #c88937;
border-bottom: 3px solid #c88937;
}
.entohaniwa::after {
position: absolute;
bottom: calc(100% + 20px);
left: -4px;
box-sizing: border-box;
width: 76px;
height: 32px;
content: "";
border-top: 3px solid #c88937;
border-bottom: 3px solid #c88937;
}
円筒埴輪（透孔）
/*=========================================
円筒埴輪（透孔）
=========================================*/
.entohaniwa-sukashiana-1 {
position: relative;
box-sizing: border-box;
width: 80px;
height: 0;
border-top: 140px solid #deb887;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
.entohaniwa-sukashiana-1::before {
position: absolute;
bottom: calc(100% + 50px);
left: -6px;
box-sizing: border-box;
width: 80px;
height: 50px;
content: "";
border-top: 3px solid #c88937;
border-bottom: 3px solid #c88937;
}
.entohaniwa-sukashiana-1::after {
position: absolute;
right: 0;
bottom: calc(100% + 65px);
left: 0;
box-sizing: border-box;
width: 20px;
height: 20px;
margin-right: auto;
margin-left: auto;
content: "";
border-radius: 50%;
background-color: #c88937;
}
円筒埴輪（透孔三角形）
/*=========================================
円筒埴輪（透孔三角形）
=========================================*/
.entohaniwa-sukashiana-2 {
position: relative;
box-sizing: border-box;
width: 80px;
height: 0;
border-top: 140px solid #deb887;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
.entohaniwa-sukashiana-2::before {
position: absolute;
bottom: calc(100% + 50px);
left: -6px;
box-sizing: border-box;
width: 80px;
height: 50px;
content: "";
border-top: 3px solid #c88937;
border-bottom: 3px solid #c88937;
}
.entohaniwa-sukashiana-2::after {
position: absolute;
right: 0;
bottom: calc(100% + 70px);
left: 0;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 20px 12px 0 12px;
border-style: solid;
border-color: #c88937 transparent transparent transparent;
}
朝顔形円筒埴輪
/*=========================================
朝顔形円筒埴輪
=========================================*/
.entohaniwa-asagao {
position: relative;
box-sizing: border-box;
width: 80px;
height: 0;
border-top: 120px solid #deb887;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
.entohaniwa-asagao::before {
position: absolute;
right: 0;
bottom: calc(100% + (100px * 1.2));
left: -6px;
box-sizing: border-box;
width: 80px;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-top: 35px solid #deb887;
border-right: 20px solid transparent;
border-bottom: 14px solid #deb887;
border-left: 20px solid transparent;
}
.entohaniwa-asagao::after {
position: absolute;
bottom: calc(100% + 50px);
left: -6px;
box-sizing: border-box;
width: 80px;
height: 50px;
content: "";
border-top: 3px solid #c88937;
border-bottom: 3px solid #c88937;
}
Sass全部（SCSS記法）
/*=========================================
変数定義
=========================================*/
$basicSize: 100px; //基本サイズ この数値を変更することで全体のサイズが変わります
$kofun_green: #43c062; //古墳の色
$haniwa_brown: #deb887; //埴輪の色
/*=========================================
円墳
=========================================*/
.enpun {
display: block;
box-sizing: border-box;
width: $basicSize;
height: $basicSize;
border-radius: 50%;
background-color: $kofun_green;
}
/*=========================================
楕円形墳
=========================================*/
.daenkeifun {
display: block;
box-sizing: border-box;
width: ($basicSize * 1.3);
height: $basicSize;
border-radius: 50%;
background-color: $kofun_green;
}
/*=========================================
方墳
=========================================*/
.hofun {
display: block;
box-sizing: border-box;
width: $basicSize;
height: $basicSize;
background-color: $kofun_green;
}
/*=========================================
長方形墳
=========================================*/
.chohokeifun {
display: block;
box-sizing: border-box;
width: ($basicSize * 1.3);
height: ($basicSize * 0.7);
background-color: $kofun_green;
}
/*=========================================
前方後円墳-前期
=========================================*/
.zenpokoenfun-zenki {
position: relative;
display: block;
box-sizing: border-box;
width: $basicSize;
height: $basicSize;
border-radius: 50%;
background-color: $kofun_green;
&::before {
position: absolute;
top: ($basicSize * 0.4);
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 0 ($basicSize * 0.35) ($basicSize * 1.25) ($basicSize * 0.35);
border-style: solid;
border-color: transparent transparent $kofun_green transparent;
}
}
/*=========================================
前方後円墳-中期
=========================================*/
.zenpokoenfun-chuki {
position: relative;
display: block;
box-sizing: border-box;
width: $basicSize;
height: $basicSize;
border-radius: 50%;
background-color: $kofun_green;
&::before {
position: absolute;
top: ($basicSize * 0.55);
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 0 ($basicSize * 0.5) ($basicSize * 1.1) ($basicSize * 0.5);
border-style: solid;
border-color: transparent transparent $kofun_green transparent;
}
}
/*=========================================
前方後円墳-後期
=========================================*/
.zenpokoenfun-kouki {
position: relative;
display: block;
box-sizing: border-box;
width: $basicSize;
height: $basicSize;
border-radius: 50%;
background-color: $kofun_green;
&::before {
position: absolute;
top: ($basicSize * 0.4);
left: ($basicSize * -0.1);
display: block;
box-sizing: border-box;
width: 0;
height: 0;
content: "";
border-width: 0 ($basicSize * 0.6) ($basicSize * 1.25) ($basicSize * 0.6);
border-style: solid;
border-color: transparent transparent $kofun_green transparent;
}
}
/*=========================================
前方後円墳-撥形
=========================================*/
.zenpokoenfun-bachigata {
position: relative;
display: block;
box-sizing: border-box;
width: $basicSize;
height: $basicSize;
border-radius: 50%;
background-color: $kofun_green;
&::before {
position: absolute;
top: 0;
right: 0;
display: block;
box-sizing: border-box;
width: ($basicSize * 0.5);
height: ($basicSize * 1.65);
content: "";
background: radial-gradient(ellipse at top ($basicSize * -1.4) right ($basicSize * -0.25), transparent, transparent ($basicSize * 0.8), $kofun_green ($basicSize * 0.72));
}
&::after {
position: absolute;
top: 0;
left: 0;
display: block;
box-sizing: border-box;
width: ($basicSize * 0.5);
height: ($basicSize * 1.65);
content: "";
background: radial-gradient(ellipse at top ($basicSize * -1.4) left ($basicSize * -0.25), transparent, transparent ($basicSize * 0.8), $kofun_green ($basicSize * 0.72));
}
}
/*=========================================
前方後円墳-剣菱形
=========================================*/
.zenpokoenfun-kenbishi {
position: relative;
display: block;
box-sizing: border-box;
width: $basicSize;
height: $basicSize;
border-radius: 50%;
background-color: $kofun_green;
&::before {
position: absolute;
top: ($basicSize * 0.55);
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 0 ($basicSize * 0.5) ($basicSize * 1.1) ($basicSize * 0.5);
border-style: solid;
border-color: transparent transparent $kofun_green transparent;
}
&::after {
position: absolute;
top: calc(100% + #{$basicSize * 0.65});
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: ($basicSize * 0.1) ($basicSize * 0.50) 0 ($basicSize * 0.50);
border-style: solid;
border-color: $kofun_green transparent transparent transparent;
}
}
/*=========================================
前方後円墳-柄鏡式
=========================================*/
.zenpokoenfun-ekagami {
position: relative;
display: block;
box-sizing: border-box;
width: $basicSize;
height: $basicSize;
border-radius: 50%;
background-color: $kofun_green;
&::before {
position: absolute;
top: ($basicSize * 0.9);
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: ($basicSize * 0.4);
height: ($basicSize * 0.75);
margin-right: auto;
margin-left: auto;
content: "";
background-color: $kofun_green;
}
}
/*=========================================
前方後円墳-帆立貝式
=========================================*/
.zenpokoenfun-hotategai {
position: relative;
display: block;
box-sizing: border-box;
width: $basicSize;
height: $basicSize;
margin-bottom: ($basicSize * 0.25);
border-radius: 50%;
background-color: $kofun_green;
&::before {
position: absolute;
top: 0;
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 0 ($basicSize * 0.35) ($basicSize * 1.25) ($basicSize * 0.35);
border-style: solid;
border-color: transparent transparent $kofun_green transparent;
}
}
/*=========================================
前方後円墳-造出し右
=========================================*/
.zenpokoenfun-tsukuridashi-r {
position: relative;
display: block;
box-sizing: border-box;
width: $basicSize;
height: $basicSize;
border-radius: 50%;
background-color: $kofun_green;
&::before {
position: absolute;
top: ($basicSize * 0.55);
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 0 ($basicSize * 0.5) ($basicSize * 1.1) ($basicSize * 0.5);
border-style: solid;
border-color: transparent transparent $kofun_green transparent;
}
&::after {
position: absolute;
top: ($basicSize * 0.89);
right: 0;
left: ($basicSize * 0.56);
display: block;
box-sizing: border-box;
width: ($basicSize * 0.25);
height: ($basicSize * 0.26);
margin-right: auto;
margin-left: auto;
content: "";
background-color: $kofun_green;
}
}
/*=========================================
前方後円墳-造出し左
=========================================*/
.zenpokoenfun-tsukuridashi-l {
position: relative;
display: block;
box-sizing: border-box;
width: $basicSize;
height: $basicSize;
border-radius: 50%;
background-color: $kofun_green;
&::before {
position: absolute;
top: ($basicSize * 0.55);
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 0 ($basicSize * 0.5) ($basicSize * 1.1) ($basicSize * 0.5);
border-style: solid;
border-color: transparent transparent $kofun_green transparent;
}
&::after {
position: absolute;
top: ($basicSize * 0.89);
right: ($basicSize * 0.56);
left: 0;
display: block;
box-sizing: border-box;
width: ($basicSize * 0.25);
height: ($basicSize * 0.26);
margin-right: auto;
margin-left: auto;
content: "";
background-color: $kofun_green;
}
}
/*=========================================
前方後円墳-造出し両方
=========================================*/
.zenpokoenfun-tsukuridashi {
position: relative;
display: block;
box-sizing: border-box;
width: $basicSize;
height: $basicSize;
border-radius: 50%;
background-color: $kofun_green;
&::before {
position: absolute;
top: ($basicSize * 0.55);
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 0 ($basicSize * 0.5) ($basicSize * 1.1) ($basicSize * 0.5);
border-style: solid;
border-color: transparent transparent $kofun_green transparent;
}
&::after {
position: absolute;
top: ($basicSize * 0.89);
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: ($basicSize * 0.84);
height: ($basicSize * 0.26);
margin-right: auto;
margin-left: auto;
content: "";
background-color: $kofun_green;
}
}
/*=========================================
前方後方墳
=========================================*/
.zenpokohofun {
position: relative;
display: block;
box-sizing: border-box;
width: $basicSize;
height: $basicSize;
background-color: $kofun_green;
&::before {
position: absolute;
top: ($basicSize * 0.55);
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 0 ($basicSize * 0.5) ($basicSize * 1.1) ($basicSize * 0.5);
border-style: solid;
border-color: transparent transparent $kofun_green transparent;
}
}
/*=========================================
双方中円墳1
=========================================*/
.sohochuenfun-1 {
position: relative;
display: block;
box-sizing: border-box;
width: $basicSize;
height: $basicSize;
border-radius: 50%;
background-color: $kofun_green;
&::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: ($basicSize * -0.3);
display: block;
box-sizing: border-box;
width: ($basicSize * 1.6);
height: ($basicSize * 0.5);
margin: auto;
content: "";
background-color: $kofun_green;
}
}
/*=========================================
双方中円墳2
=========================================*/
.sohochuenfun-2 {
position: relative;
display: block;
box-sizing: border-box;
width: $basicSize;
height: $basicSize;
border-radius: 50%;
background-color: $kofun_green;
&::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: ($basicSize * -0.4);
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin: auto;
content: "";
border-width: ($basicSize * 0.4) 0 ($basicSize * 0.4) ($basicSize * 1.20);
border-style: solid;
border-color: transparent transparent transparent $kofun_green;
}
&::after {
position: absolute;
top: 0;
right: ($basicSize * -0.4);
bottom: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin: auto;
content: "";
border-width: ($basicSize * 0.4) ($basicSize * 1.20) ($basicSize * 0.4) 0;
border-style: solid;
border-color: transparent $kofun_green transparent transparent;
}
}
/*=========================================
双方中方墳
=========================================*/
.sohochuhofun {
position: relative;
display: block;
box-sizing: border-box;
width: $basicSize;
height: $basicSize;
background-color: $kofun_green;
&::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: ($basicSize * -0.4);
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin: auto;
content: "";
border-width: ($basicSize * 0.3) 0 ($basicSize * 0.3) ($basicSize * 1.20);
border-style: solid;
border-color: transparent transparent transparent $kofun_green;
}
&::after {
position: absolute;
top: 0;
right: ($basicSize * -0.4);
bottom: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin: auto;
content: "";
border-width: ($basicSize * 0.3) ($basicSize * 1.20) ($basicSize * 0.3) 0;
border-style: solid;
border-color: transparent $kofun_green transparent transparent;
}
}
/*=========================================
双円墳
=========================================*/
.soenfun {
position: relative;
display: block;
box-sizing: border-box;
width: $basicSize;
height: $basicSize;
border-radius: 50%;
background-color: $kofun_green;
&::before {
position: absolute;
top: $basicSize * 0.7;
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: ($basicSize * 0.8);
height: ($basicSize * 0.8);
margin-right: auto;
margin-left: auto;
content: "";
border-radius: 50%;
background-color: $kofun_green;
}
}
/*=========================================
六角形墳
=========================================*/
.rokkakkeifun {
position: relative;
display: block;
box-sizing: border-box;
width: $basicSize;
height: ($basicSize * 0.58);
background-color: $kofun_green;
&::before {
position: absolute;
top: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 100%;
height: 100%;
content: "";
transform: rotate(60deg);
background-color: $kofun_green;
}
&::after {
position: absolute;
top: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 100%;
height: 100%;
content: "";
transform: rotate(-60deg);
background-color: $kofun_green;
}
}
/*=========================================
八角形墳
=========================================*/
.hakkakkeifun {
position: relative;
display: block;
box-sizing: border-box;
width: $basicSize;
height: $basicSize * 0.42;
background-color: $kofun_green;
&::before {
position: absolute;
top: ($basicSize * -0.29);
left: 0;
display: block;
box-sizing: content-box;
width: $basicSize * 0.42;
height: 0;
content: "";
border-width: 0 ($basicSize * 0.29) ($basicSize * 0.29) ($basicSize * 0.29);
border-style: solid;
border-color: transparent transparent $kofun_green transparent;
}
&::after {
position: absolute;
bottom: ($basicSize * -0.29);
left: 0;
display: block;
box-sizing: content-box;
width: $basicSize * 0.42;
height: 0;
content: "";
border-width: ($basicSize * 0.29) ($basicSize * 0.29) 0 ($basicSize * 0.29);
border-style: solid;
border-color: $kofun_green transparent transparent transparent;
}
}
/*=========================================
四隅突出型墳丘墓
=========================================*/
.yosumitosshutsu {
position: relative;
display: block;
box-sizing: border-box;
width: $basicSize;
height: $basicSize;
background-color: $kofun_green;
&::before {
position: absolute;
top: ($basicSize * 0.35);
left: ($basicSize * -0.35);
display: block;
box-sizing: border-box;
width: ($basicSize * 1.7);
height: ($basicSize * 0.3);
content: "";
transform: rotate(45deg);
border-radius: 42%;
background-color: $kofun_green;
}
&::after {
position: absolute;
top: ($basicSize * 0.35);
left: ($basicSize * -0.35);
display: block;
box-sizing: border-box;
width: ($basicSize * 1.7);
height: ($basicSize * 0.3);
content: "";
transform: rotate(-45deg);
border-radius: 42%;
background-color: $kofun_green;
}
}
/*=========================================
円筒埴輪
=========================================*/
.entohaniwa {
position: relative;
box-sizing: border-box;
width: ($basicSize * 0.8);
height: 0;
border-top: ($basicSize * 1.4) solid $haniwa_brown;
border-right: ($basicSize * 0.06) solid transparent;
border-left: ($basicSize * 0.06) solid transparent;
&::before {
position: absolute;
bottom: calc(100% + #{$basicSize * 0.8});
left: ($basicSize * -0.06);
box-sizing: border-box;
width: ($basicSize * 0.8);
height: ($basicSize * 0.32);
content: "";
border-top: 3px solid darken($haniwa_brown, 20%);
border-bottom: 3px solid darken($haniwa_brown, 20%);
}
&::after {
position: absolute;
bottom: calc(100% + #{$basicSize * 0.2});
left: ($basicSize * -0.04);
box-sizing: border-box;
width: ($basicSize * 0.76);
height: ($basicSize * 0.32);
content: "";
border-top: 3px solid darken($haniwa_brown, 20%);
border-bottom: 3px solid darken($haniwa_brown, 20%);
}
}
/*=========================================
円筒埴輪（透孔）
=========================================*/
.entohaniwa-sukashiana-1 {
position: relative;
box-sizing: border-box;
width: ($basicSize * 0.8);
height: 0;
border-top: ($basicSize * 1.4) solid $haniwa_brown;
border-right: ($basicSize * 0.06) solid transparent;
border-left: ($basicSize * 0.06) solid transparent;
&::before {
position: absolute;
bottom: calc(100% + #{$basicSize * 0.5});
left: ($basicSize * -0.06);
box-sizing: border-box;
width: ($basicSize * 0.8);
height: ($basicSize * 0.5);
content: "";
border-top: 3px solid darken($haniwa_brown, 20%);
border-bottom: 3px solid darken($haniwa_brown, 20%);
}
&::after {
position: absolute;
right: 0;
bottom: calc(100% + #{$basicSize * 0.65});
left: 0;
box-sizing: border-box;
width: ($basicSize * 0.2);
height: ($basicSize * 0.2);
margin-right: auto;
margin-left: auto;
content: "";
border-radius: 50%;
background-color: darken($haniwa_brown, 20%);
}
}
/*=========================================
円筒埴輪（透孔三角形）
=========================================*/
.entohaniwa-sukashiana-2 {
position: relative;
box-sizing: border-box;
width: ($basicSize * 0.8);
height: 0;
border-top: ($basicSize * 1.4) solid $haniwa_brown;
border-right: ($basicSize * 0.06) solid transparent;
border-left: ($basicSize * 0.06) solid transparent;
&::before {
position: absolute;
bottom: calc(100% + #{$basicSize * 0.5});
left: ($basicSize * -0.06);
box-sizing: border-box;
width: ($basicSize * 0.8);
height: ($basicSize * 0.5);
content: "";
border-top: 3px solid darken($haniwa_brown, 20%);
border-bottom: 3px solid darken($haniwa_brown, 20%);
}
&::after {
position: absolute;
right: 0;
bottom: calc(100% + #{$basicSize * 0.7});
left: 0;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: ($basicSize * 0.2) ($basicSize * 0.12) 0 ($basicSize * 0.12);
border-style: solid;
border-color: darken($haniwa_brown, 20%) transparent transparent transparent;
}
}
/*=========================================
朝顔形円筒埴輪
=========================================*/
.entohaniwa-asagao {
position: relative;
box-sizing: border-box;
width: ($basicSize * 0.8);
height: 0;
border-top: ($basicSize * 1.2) solid $haniwa_brown;
border-right: ($basicSize * 0.06) solid transparent;
border-left: ($basicSize * 0.06) solid transparent;
&::before {
position: absolute;
right:0;
bottom: calc(100% + (#{$basicSize} * 1.2));
left: ($basicSize * -0.06);
box-sizing: border-box;
width: ($basicSize * 0.8);
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-top: ($basicSize * 0.35) solid $haniwa_brown;
border-right: ($basicSize * 0.2) solid transparent;
border-bottom: ($basicSize * 0.14) solid $haniwa_brown;
border-left: ($basicSize * 0.2) solid transparent;
}
&::after {
position: absolute;
bottom: calc(100% + #{$basicSize * 0.5});
left: ($basicSize * -0.06);
box-sizing: border-box;
width: ($basicSize * 0.8);
height: ($basicSize * 0.5);
content: "";
border-top: 3px solid darken($haniwa_brown, 20%);
border-bottom: 3px solid darken($haniwa_brown, 20%);
}
}
css全部（Sassをコンパイルしたもの）
/*=========================================
円墳
=========================================*/
.enpun {
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
/*=========================================
楕円形墳
=========================================*/
.daenkeifun {
display: block;
box-sizing: border-box;
width: 130px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
/*=========================================
方墳
=========================================*/
.hofun {
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
background-color: #43c062;
}
/*=========================================
長方形墳
=========================================*/
.chohokeifun {
display: block;
box-sizing: border-box;
width: 130px;
height: 70px;
background-color: #43c062;
}
/*=========================================
前方後円墳-前期
=========================================*/
.zenpokoenfun-zenki {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
.zenpokoenfun-zenki::before {
position: absolute;
top: 40px;
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 0 35px 125px 35px;
border-style: solid;
border-color: transparent transparent #43c062 transparent;
}
/*=========================================
前方後円墳-中期
=========================================*/
.zenpokoenfun-chuki {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
.zenpokoenfun-chuki::before {
position: absolute;
top: 55px;
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 0 50px 110px 50px;
border-style: solid;
border-color: transparent transparent #43c062 transparent;
}
/*=========================================
前方後円墳-後期
=========================================*/
.zenpokoenfun-kouki {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
.zenpokoenfun-kouki::before {
position: absolute;
top: 40px;
left: -10px;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
content: "";
border-width: 0 60px 125px 60px;
border-style: solid;
border-color: transparent transparent #43c062 transparent;
}
/*=========================================
前方後円墳-撥形
=========================================*/
.zenpokoenfun-bachigata {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
.zenpokoenfun-bachigata::before {
position: absolute;
top: 0;
right: 0;
display: block;
box-sizing: border-box;
width: 50px;
height: 165px;
content: "";
background: radial-gradient(ellipse at top -140px right -25px, transparent, transparent 80px, #43c062 72px);
}
.zenpokoenfun-bachigata::after {
position: absolute;
top: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 50px;
height: 165px;
content: "";
background: radial-gradient(ellipse at top -140px left -25px, transparent, transparent 80px, #43c062 72px);
}
/*=========================================
前方後円墳-剣菱形
=========================================*/
.zenpokoenfun-kenbishi {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
.zenpokoenfun-kenbishi::before {
position: absolute;
top: 55px;
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 0 50px 110px 50px;
border-style: solid;
border-color: transparent transparent #43c062 transparent;
}
.zenpokoenfun-kenbishi::after {
position: absolute;
top: calc(100% + 65px);
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 10px 50px 0 50px;
border-style: solid;
border-color: #43c062 transparent transparent transparent;
}
/*=========================================
前方後円墳-柄鏡式
=========================================*/
.zenpokoenfun-ekagami {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
.zenpokoenfun-ekagami::before {
position: absolute;
top: 90px;
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 40px;
height: 75px;
margin-right: auto;
margin-left: auto;
content: "";
background-color: #43c062;
}
/*=========================================
前方後円墳-帆立貝式
=========================================*/
.zenpokoenfun-hotategai {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
margin-bottom: 25px;
border-radius: 50%;
background-color: #43c062;
}
.zenpokoenfun-hotategai::before {
position: absolute;
top: 0;
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 0 35px 125px 35px;
border-style: solid;
border-color: transparent transparent #43c062 transparent;
}
/*=========================================
前方後円墳-造出し右
=========================================*/
.zenpokoenfun-tsukuridashi-r {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
.zenpokoenfun-tsukuridashi-r::before {
position: absolute;
top: 55px;
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 0 50px 110px 50px;
border-style: solid;
border-color: transparent transparent #43c062 transparent;
}
.zenpokoenfun-tsukuridashi-r::after {
position: absolute;
top: 89px;
right: 0;
left: 56px;
display: block;
box-sizing: border-box;
width: 25px;
height: 26px;
margin-right: auto;
margin-left: auto;
content: "";
background-color: #43c062;
}
/*=========================================
前方後円墳-造出し左
=========================================*/
.zenpokoenfun-tsukuridashi-l {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
.zenpokoenfun-tsukuridashi-l::before {
position: absolute;
top: 55px;
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 0 50px 110px 50px;
border-style: solid;
border-color: transparent transparent #43c062 transparent;
}
.zenpokoenfun-tsukuridashi-l::after {
position: absolute;
top: 89px;
right: 56px;
left: 0;
display: block;
box-sizing: border-box;
width: 25px;
height: 26px;
margin-right: auto;
margin-left: auto;
content: "";
background-color: #43c062;
}
/*=========================================
前方後円墳-造出し両方
=========================================*/
.zenpokoenfun-tsukuridashi {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
.zenpokoenfun-tsukuridashi::before {
position: absolute;
top: 55px;
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 0 50px 110px 50px;
border-style: solid;
border-color: transparent transparent #43c062 transparent;
}
.zenpokoenfun-tsukuridashi::after {
position: absolute;
top: 89px;
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 84px;
height: 26px;
margin-right: auto;
margin-left: auto;
content: "";
background-color: #43c062;
}
/*=========================================
前方後方墳
=========================================*/
.zenpokohofun {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
background-color: #43c062;
}
.zenpokohofun::before {
position: absolute;
top: 55px;
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 0 50px 110px 50px;
border-style: solid;
border-color: transparent transparent #43c062 transparent;
}
/*=========================================
双方中円墳1
=========================================*/
.sohochuenfun-1 {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
.sohochuenfun-1::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: -30px;
display: block;
box-sizing: border-box;
width: 160px;
height: 50px;
margin: auto;
content: "";
background-color: #43c062;
}
/*=========================================
双方中円墳2
=========================================*/
.sohochuenfun-2 {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
.sohochuenfun-2::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: -40px;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin: auto;
content: "";
border-width: 40px 0 40px 120px;
border-style: solid;
border-color: transparent transparent transparent #43c062;
}
.sohochuenfun-2::after {
position: absolute;
top: 0;
right: -40px;
bottom: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin: auto;
content: "";
border-width: 40px 120px 40px 0;
border-style: solid;
border-color: transparent #43c062 transparent transparent;
}
/*=========================================
双方中方墳
=========================================*/
.sohochuhofun {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
background-color: #43c062;
}
.sohochuhofun::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: -40px;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin: auto;
content: "";
border-width: 30px 0 30px 120px;
border-style: solid;
border-color: transparent transparent transparent #43c062;
}
.sohochuhofun::after {
position: absolute;
top: 0;
right: -40px;
bottom: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 0;
height: 0;
margin: auto;
content: "";
border-width: 30px 120px 30px 0;
border-style: solid;
border-color: transparent #43c062 transparent transparent;
}
/*=========================================
双円墳
=========================================*/
.soenfun {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #43c062;
}
.soenfun::before {
position: absolute;
top: 70px;
right: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 80px;
height: 80px;
margin-right: auto;
margin-left: auto;
content: "";
border-radius: 50%;
background-color: #43c062;
}
/*=========================================
六角形墳
=========================================*/
.rokkakkeifun {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 58px;
background-color: #43c062;
}
.rokkakkeifun::before {
position: absolute;
top: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 100%;
height: 100%;
content: "";
transform: rotate(60deg);
background-color: #43c062;
}
.rokkakkeifun::after {
position: absolute;
top: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 100%;
height: 100%;
content: "";
transform: rotate(-60deg);
background-color: #43c062;
}
/*=========================================
八角形墳
=========================================*/
.hakkakkeifun {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 42px;
background-color: #43c062;
}
.hakkakkeifun::before {
position: absolute;
top: -29px;
left: 0;
display: block;
box-sizing: content-box;
width: 42px;
height: 0;
content: "";
border-width: 0 29px 29px 29px;
border-style: solid;
border-color: transparent transparent #43c062 transparent;
}
.hakkakkeifun::after {
position: absolute;
bottom: -29px;
left: 0;
display: block;
box-sizing: content-box;
width: 42px;
height: 0;
content: "";
border-width: 29px 29px 0 29px;
border-style: solid;
border-color: #43c062 transparent transparent transparent;
}
/*=========================================
四隅突出型墳丘墓
=========================================*/
.yosumitosshutsu {
position: relative;
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
background-color: #43c062;
}
.yosumitosshutsu::before {
position: absolute;
top: 35px;
left: -35px;
display: block;
box-sizing: border-box;
width: 170px;
height: 30px;
content: "";
transform: rotate(45deg);
border-radius: 42%;
background-color: #43c062;
}
.yosumitosshutsu::after {
position: absolute;
top: 35px;
left: -35px;
display: block;
box-sizing: border-box;
width: 170px;
height: 30px;
content: "";
transform: rotate(-45deg);
border-radius: 42%;
background-color: #43c062;
}
/*=========================================
円筒埴輪
=========================================*/
.entohaniwa {
position: relative;
box-sizing: border-box;
width: 80px;
height: 0;
border-top: 140px solid #deb887;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
.entohaniwa::before {
position: absolute;
bottom: calc(100% + 80px);
left: -6px;
box-sizing: border-box;
width: 80px;
height: 32px;
content: "";
border-top: 3px solid #c88937;
border-bottom: 3px solid #c88937;
}
.entohaniwa::after {
position: absolute;
bottom: calc(100% + 20px);
left: -4px;
box-sizing: border-box;
width: 76px;
height: 32px;
content: "";
border-top: 3px solid #c88937;
border-bottom: 3px solid #c88937;
}
/*=========================================
円筒埴輪（透孔）
=========================================*/
.entohaniwa-sukashiana-1 {
position: relative;
box-sizing: border-box;
width: 80px;
height: 0;
border-top: 140px solid #deb887;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
.entohaniwa-sukashiana-1::before {
position: absolute;
bottom: calc(100% + 50px);
left: -6px;
box-sizing: border-box;
width: 80px;
height: 50px;
content: "";
border-top: 3px solid #c88937;
border-bottom: 3px solid #c88937;
}
.entohaniwa-sukashiana-1::after {
position: absolute;
right: 0;
bottom: calc(100% + 65px);
left: 0;
box-sizing: border-box;
width: 20px;
height: 20px;
margin-right: auto;
margin-left: auto;
content: "";
border-radius: 50%;
background-color: #c88937;
}
/*=========================================
円筒埴輪（透孔三角形）
=========================================*/
.entohaniwa-sukashiana-2 {
position: relative;
box-sizing: border-box;
width: 80px;
height: 0;
border-top: 140px solid #deb887;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
.entohaniwa-sukashiana-2::before {
position: absolute;
bottom: calc(100% + 50px);
left: -6px;
box-sizing: border-box;
width: 80px;
height: 50px;
content: "";
border-top: 3px solid #c88937;
border-bottom: 3px solid #c88937;
}
.entohaniwa-sukashiana-2::after {
position: absolute;
right: 0;
bottom: calc(100% + 70px);
left: 0;
box-sizing: border-box;
width: 0;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-width: 20px 12px 0 12px;
border-style: solid;
border-color: #c88937 transparent transparent transparent;
}
/*=========================================
朝顔形円筒埴輪
=========================================*/
.entohaniwa-asagao {
position: relative;
box-sizing: border-box;
width: 80px;
height: 0;
border-top: 120px solid #deb887;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
.entohaniwa-asagao::before {
position: absolute;
right: 0;
bottom: calc(100% + (100px * 1.2));
left: -6px;
box-sizing: border-box;
width: 80px;
height: 0;
margin-right: auto;
margin-left: auto;
content: "";
border-top: 35px solid #deb887;
border-right: 20px solid transparent;
border-bottom: 14px solid #deb887;
border-left: 20px solid transparent;
}
.entohaniwa-asagao::after {
position: absolute;
bottom: calc(100% + 50px);
left: -6px;
box-sizing: border-box;
width: 80px;
height: 50px;
content: "";
border-top: 3px solid #c88937;
border-bottom: 3px solid #c88937;
}
- 最新全国古墳の数、多い順ランキング！（令和3年度調査）
- 栃木県那珂川町観光協会主催の【那須小川の古墳群にコーフンツアー】のメディア向けツアーに参加しました！
- CSSで描く古墳
- 山梨県甲府市『第30回 山梨県甲斐風土記の丘 こどもまつり』に参加しました！
- 栃木県小山市『国史跡 摩利支天塚・琵琶塚古墳資料館完成オープニングイベント』に参加しました！
- 潜入レポート はとバス日帰りツアー『古墳大好き♪まりこふんと行く！はじめての古墳 ～千葉県編～』
- 国立歴史民俗博物館 企画展【世界の眼でみる古墳文化】内覧会レポート
- 天王塚古墳（和歌山県和歌山市）、54年ぶりの石室公開に行ってきたよ！
- 今日の古墳消しゴム版画『江田船山古墳出土「銀錯銘大刀」』
- 『出雲国風土記連続講座 特別編』にゲスト出演しました。
- 『古墳にコーフン！ in 東急ハンズ博多店』始まったよー！
- ギャラクシティで『帰ってきたはにわんわんの「古墳 de コーフン！」たいけん』を観てきたよ。
- まりこふん、群馬で墳活！（総社古墳群・綿貫観音山古墳）
- 東急ハンズ広島店×古墳にコーフン協会で古代コラボ企画開催中！
- 生目古墳群DEフェスタ2016に出演したよ。
- 11月24日の調布FM『古墳にコーフン協会コーナー』は、大分支部長が登場！
- よし。
- 2016年最後のまりこふんライブは生目古墳群です！
- 読売テレビ「す・またん＆ZIP！」で、come come*はにコット vol.6のようすが放送されます。
- 『第6回 come come*はにコット』に参加しました。
- 明日のcome come*はにコット
- 「come come＊はにコット」テーマ曲のダンス練習中。
- 宮崎放送ラジオ電話出演後・・・、
- まりこふん、MRT宮崎放送「クイズでGO！GO！」に電話出演します。
- 本日、まりこふんがTVK「サタミンエイト」に出演
- 「第9回野毛古墳まつり」に参加しました〜。
- 泉崎横穴（福島県泉崎村）の公開日だーーー！
- 今日の古墳消しゴムハンコ『チブサン古墳』
- 今日の古墳消しゴムハンコ『円筒埴輪』
- 今日の古墳消しゴムハンコ『泉崎横穴』
- 今日の古墳消しゴムハンコ『珍敷塚古墳』
- 福岡県飯塚市・桂川町deコーフン！（その2）
- 福岡県飯塚市・桂川町deコーフン！（その1）
- 『USA古墳・桜まつり』に参加しました。
- 『熊本装飾古墳とデザイン Kumamoto Rock Art & Design』展に行ってきました
- 『古墳にコーフン協会トークライブ！』終了しました
- 東京国立博物館平成館考古展示室リニューアルオープンの報道メディア向け内覧会におじゃましました。
- 『第3回みやこ町古墳まつり』に参加しました。
- 大安場史跡公園「古墳まつり秋」に参加しました！
- FM YOKOHAMA「FUTURESCAPE」に出演しました！
- まりこふんの新刊「奈良の古墳」刊行記念イベントを開催しました。（啓林堂書店奈良店にて）
- TOKYO FM「鷹の爪団 世界征服ラヂヲ」に出演しました！
- 「たかつきDAYS（広報たかつき）平成27年9月号」にまりこふん＆ウルフルケイスケさんの古墳記事が掲載♪
- 『奈良の古墳』見本が届いた〜！
- まりこふん著の新刊『奈良の古墳』が2015年9月1日発売です！
- 藤井寺市での古墳講座、終了！
- まりこふんといく、はとバスツアー2015年 秋！
- TOKYO FM「BlueOcean」ゲスト出演でした。
- NHKラジオ第一の放送日でした。
- コジフン vol.10終了しました。
- 群馬県藤岡市で墳活！
- 埴輪ビルダー入門
- NHKのラジオ収録デー。
- 「高田文夫のラジオビバリー昼ズ」に生出演
- ヒソヒソバナシ。
- KBCテレビ「サワダデース」で古墳特集！
- 今週のNHKラジオ まりこふんの古墳コーナー収録
- 『敬文舎「古代文化」シリーズ第一弾！古墳トーク＆古墳ソング「古墳にコーフン講座」』開催しました。
- 古墳ソング新曲「塚廻りDancing」完成！
- 大安場史跡公園 まりこふんライブ
- かわいい古事記と古墳の世界 古代妄想イラストレーターと古墳シンガーによるトーク＆ライブショー
- 今日はNHKラジオの収録
- 明日はNHKラジオ放送日
- まりこふん FROGMAN氏（蛙男商会）に会う
- コジフン3rdシーズン〜宮崎珍道中編〜vol.1終了！
- 今日の古墳消しゴムハンコ
- まりこふん VR作品「王塚古墳」を体験
- まりこふん 埼玉県行田市長を訪問
- まりこふん＆しだみこちゃん＆埴輪氏武、中部国際空港セントレアライブ（2月14日）
- 季節の古墳消しゴムハンコ（2015年2月）
- 季節の古墳消しゴムハンコ（2015年1月）
- 季節の古墳消しゴムハンコ（2014年12月）
- come come*はにコット vol.4に参加しました
- 史跡恵解山古墳開園記念式典・見学会に参加しました
- まりこふん 三角縁神獣鏡を割る！食べる！
- 名古屋市 古墳ツアーその2：一本松古墳
- 名古屋市 古墳ツアーその1：八幡山古墳
- 名古屋市 志段味古墳群ツアーその7：勝手塚古墳
- 名古屋市 志段味古墳群ツアーその6：志段味大塚古墳
- 名古屋市 志段味古墳群ツアーその5：中社古墳
- 名古屋市 志段味古墳群ツアーその4：尾張戸神社古墳
- 名古屋市 志段味古墳群ツアーその3：ヒ・ミ・ツの古墳
- 名古屋市 志段味古墳群ツアーその2：白鳥1号墳
- 名古屋市 志段味古墳群ツアーその1：白鳥塚古墳
- come come* はにコット vol.3に行ってきました。
- ぶらり亀甲山古墳
- つぶつぶみかん古墳
- 空から古墳を見てみよう（まりこふん、仁徳天皇陵に会うの巻）
- 古墳鍋つかみ、キターーー！
- ジオラマ
- Myはにわ
- 古墳クッション
- 航空自衛隊奈良基地イメージキャラクターナキちゃん