CSSで三角形を生成

divを45度ずらして重ねることで色々な三角形を作成することが出来ます。
当ページでは、実際に見ながら上下左右、角度指定の三角形を作成できます。色・グラデーションを使用したデザインが指定できます。

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

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

<style type="text/css">
.box {
  margin       : auto;
                              /* はみ出し部分は非表示にする */
  overflow     : hidden;
  position     : relative;
  width        : 84px;
  height       : 169px;
}
.box::after {
  content      : "";
  position     : absolute;
  width        : 120px;
  height       : 120px;
                              /* 図形のCSS */
  background   : linear-gradient(135deg, #99ccff, #0059b3);
  top          : 24px;
  left         : -61px;
  transform    : rotate(45deg);
}
</style>