CSSで四角形(正方形,長方形,ひし形)を生成

CSSの四角形はdivで作成します。ひし形は「transform」で図形を変形することで簡単に作成することが出来ます。
当ページでは、実際に見ながら大きさ、幅、高さ、角度指定の三角形を作成できます。前面に文字を重ねたり、色・グラデーションを使用したデザインが指定できます。

生成された「html」「css」などのソースコードは、そのままコピー＆ペーストで利用することが出来ます。

<div class="box" id="makeImg">
</div>

<style type="text/css">
.box {
  margin       : auto;
  width        : 150px;
  height       : 150px;
  background   : linear-gradient(to bottom, #99ccff, #0059b3);
}
</style>