文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > CSSで図形 > CSSで三角形

CSSで三角形を生成

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

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

いろいろ三角形を試してみよう

三角形の向き
三角形のサイズ
大きさ
縦横比
全面文字
図形の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
グラデーション
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
使用したhtml
<div class="box" id="makeImg">
</div>
生成したCSS
<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>
ページTOP
広告
広告
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP

当サイト内の関連するページ

広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン