古墳にコーフン協会

  2. 協会日記

協会日記

CSSで描く古墳

投稿日：2020年02月02日

はじめに

ネタです（断言）。

今後、どこかで使うことがあるかもしれません・・・。
「ああっ、CSSで古墳を描きたい！！！」という時が来るかもしれません・・・。
そんな時、このページを思い出してください。
きっとあなたのお役に立つことでしょう。

※ここで公開されてれいるcss（Sass）は、ご自由にお使いください。改変も自由です。使用申請も連絡も不要です。

※一部のウェブブラウザでは表示が崩れるかもしれません。（未調査です）

目次

もうちょっと解説サンプル
Sass全部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;
}

最近の日記投稿

  1. CSSで描く古墳投稿日：2020年02月02日
  2. 山梨県甲府市『第30回　山梨県甲斐風土記の丘　こどもまつり』に参加しました！投稿日：2018年05月03日
  3. 栃木県小山市『国史跡　摩利支天塚・琵琶塚古墳資料館完成オープニングイベント』に参加しました！投稿日：2018年04月21日
  4. 潜入レポート　はとバス日帰りツアー『古墳大好き♪まりこふんと行く！はじめての古墳 ～千葉県編～』投稿日：2018年04月14日
  5. 国立歴史民俗博物館　企画展【世界の眼でみる古墳文化】内覧会レポート投稿日：2018年03月05日
  6. 天王塚古墳（和歌山県和歌山市）、54年ぶりの石室公開に行ってきたよ！投稿日：2018年03月04日
  7. 今日の古墳消しゴム版画『江田船山古墳出土「銀錯銘大刀」』投稿日：2017年03月16日
  8. 『出雲国風土記連続講座 特別編』にゲスト出演しました。投稿日：2017年01月28日
  9. 『古墳にコーフン！ in 東急ハンズ博多店』始まったよー！投稿日：2017年01月23日
  10. ギャラクシティで『帰ってきたはにわんわんの「古墳 de コーフン！」たいけん』を観てきたよ。投稿日：2016年12月11日

日記月別アーカイブ