CSSで描く古墳
投稿日:2020年02月02日
はじめに
ネタです(断言)。
今後、どこかで使うことがあるかもしれません・・・。
「ああっ、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;
}