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

CSSで円(丸)を生成

CSSの「border-radius」を利用することで色々な円(丸)を作成することが出来ます。
当ページでは、実際に見ながら「正円」「楕円」「半円」「たまご形」を作成できます。角度や色・グラデーションを使用したデザインが指定できます。

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

いろいろ円(丸)を試してみよう

図形
図形のサイズと向き
高さ
とんがり
全面文字
図形の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
グラデーション
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
使用したhtml
<div class="box" id="makeImg">
</div>
生成したCSS
<style type="text/css">
.box {
  margin       : auto;
  overflow     : hidden;
  position     : relative;
                              /* 図形のCSS */
  width        : 120px;
  height       : 180px;
  background   : linear-gradient(to bottom, #99ccff, #0059b3);
  border-radius: 50%/65% 65% 35% 35%;
}
</style>
ページTOP
広告
広告
広告

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

広告
ページTOP

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

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