一面に形を以って繋げる RSSフィード

03.29(Tue).2005六角形 このエントリーを含むブックマーク

ベースに三角のスタイルを使い、ふたつの作り方を考えてみた。

ひとつめは、ブロックの四角を両サイド三角で挟んだ状態を表現している。この場合、四角の中に文字やリンクなど取り入れられる。

test

CSS

画像→




<div class="sikakuwaku">
<div id="tetora" class="skyl"></div>
<div class="sikaku">test</div>
<div id="tetora" class="skyr"></div>
</div>

#tetora{  三角共通部分
  font-size: 0px;
  line-height: 0%;
  width: auto;
  box-sizing: content-box;
  -moz-box-sizing: content-box;
}
.skyl{  左側
  display: block;
  float: left;
  border-top: 28px solid white;
  border-right: 14px solid #7ab1cc;
  border-bottom: 28px solid white;
}
.skyr{  右側
  float: right;
  display: block;
  border-top: 28px solid white;
  border-left: 14px solid #7ab1cc;
  border-bottom: 28px solid white;
}
.sikakuwaku{  外側で囲む
  background-color: #cccccc;
  ↑ 隠れているが対応していない場合のチェック用
  height: 56px;
  width: 58px; 2ピクセル分余分にバランスをとる
  margin: 0;
  padding 0;
}
.sikaku{  内側の支え
  float: left;
  background-color: #7ab1cc;
  height: 56px;
  width: 30px;
  margin: 0;
  padding 0;
  border: none;
}

ふたつめは三角の頂点を向かい合わせた所に作りだされる六角形でバグのような感じ。他の環境で再現できるかは定かではない。リンクはできると思うが文字は置けないと思う。

三角に作成するには両サイドのコーナーを拡大し、基本の辺を狭めることにより再現できる。対辺の重なりがお互いの色で打ち消し合っている状態で、均衡を保っているのかも知れない。

下のずらしてよっつ組み合わせた図柄は、他の環境でどうなるかわかりません。

CSS


画像→



<div id="sixl" class="wakuwaku">
<div id="tetora" class="greenup"></div>
<div id="tetora" class="greendown"></div>
<div id="tetora" class="blueup"></div>
<div id="tetora" class="bluedown"></div>
</div>
<div id="sixr" class="wakuwaku">
<div id="tetora" class="redup"></div>
<div id="tetora" class="reddown"></div>
<div id="tetora" class="yellowup"></div>
<div id="tetora" class="yellowdown"></div>
</div>

#tetora{  三角共通部分
  font-size: 0px;
  line-height: 0%;
  width: auto;
  box-sizing: content-box;
  -moz-box-sizing: content-box;
}
.wakuwaku{
  width: 40px;
}
#sixl{ 左側配置用
  display: block;
  float: left;
}
#sixr{ 右側配置用
  display: block;
  float: left;
  margin-top: 20px;
  margin-left: -10px;
}
.greenup{
  border-right: 10px solid white; /* right up */
  border-left: 10px solid white;  /* left up */
  border-bottom: 20px solid #BFFFF2;
}
.greendown{
  border-top: 20px solid #BFFFF2;
  border-left: 10px solid white; /* left down */
  border-right: 10px solid #FFC080; /* right down */
}
.blueup{
  border-right: 10px solid #FFC080; /* right up */
  border-left: 10px solid white;  /* left up */
  border-bottom: 20px solid #8898FF;
}
.bluedown{
  border-top: 20px solid #8898FF;
  border-left: 10px solid white; /* left down */
  border-right: 10px solid #FFFFBF; /* right down */
}
.redup{
  border-right: 10px solid white; /* right up */
  border-left: 10px solid #BFFFF2;  /* left up */
  border-bottom: 20px solid #FFC080;
}
.reddown{
  border-top: 20px solid #FFC080;
  border-left: 10px solid #8898FF; /* left down */
  border-right: 10px solid white; /* right down */
}
.yellowup{
  border-right: 10px solid white; /* right up */
  border-left: 10px solid #8898FF;  /* left up */
  border-bottom: 20px solid #FFFFBF;
}
.yellowdown{
  border-top: 20px solid #FFFFBF;
  border-left: 10px solid white; /* left down */
  border-right: 10px solid white; /* right down */
}

※人力はてなで回答の中に合ったリンクで CSS を使って三角形を作るものがあった。それを探したが見当たらないので、詳しい解説のページはわかりません。

※序々にシートの内容が大きくなって来てるので、シートが外部リンクで読みこまれるようにできると管理がしやすくなるのだけれど…