基本図形 五角形 – css Pentagon –
「五角形」の描画。borderを使った例とbackgroundを使った例です。
borderを使った例
html
<div class="pentagon"></div>
css
.pentagon {
p...
基本図形 
基本図形 星形 – css Star –
「星形」の描画。borderを使った例です。
html
<div class="star"></div>
css
.star {
position: relative;
width: 0;
height...
基本図形 平行四辺形 – css Parallelogram –
「平行四辺形」の描画。borderを使った例とbackgroundを使った例です。「Parallelogram」って知りませんでした･･･
borderを使った例（縦1）
html
<div class="parallelog...
基本図形 台形 – css Trapezoid –
「台形」の描画。borderを使った例とbackgroundを使った例です。「Trapezoid」って知りませんでした･･･
borderを使った例（上）
html
<div class="trapezoid_up">&l...
基本図形 三角形2 – css triangle –
「三角形」の描画。borderを使った例とbackgroundを使った例です。
borderを使った例（左上）
html
<div class="triangle_left_up"></div>
css
.t...
基本図形 三角形 – css triangle –
「三角形」の描画。borderを使った例とbackgroundを使った例です。
borderを使った例（上）
html
<div class="triangle_up"></div>
css
.triangl...
基本図形 楕円形 – css oval –
「楕円形」の描画。値の指定で角丸から楕円まで出来ます。また、borderの使い方で色々と出来そうです。
html
<div class="oval"></div>
css
.oval {
width: 160...
基本図形 円形 – css circle –
「円形」の描画。値の指定で角丸から正円まで出来ます。また、borderの使い方で色々と出来そうです。
html
html
<div class="circle"></div>
css
.circle {
w...
基本図形 長方形 – css rectangle –
「長方形」の描画。基本何もしておりませんが、borderの使い方で色々と出来そうです。
html
<div class="rectangle"></div>
css
.rectangle {
width: ...
基本図形 四角形 – css Square –
「四角形」の描画。基本何もしておりませんが、borderの使い方で色々と出来そうです。
html
<div class="square"></div>
css
.square {
width: 100px;...
cssの基本 transform: rotate （要素の回転）
マウスを乗せてください
transform: rotateプロパティは「要素の回転」を指定する場合に使用します。
html
<div class="square_transform_rotate"></div>...
cssの基本 radial-gradient （円形グラデーション）
radial-gradientプロパティは「円形グラデーション」を指定する場合に使用します。
html
<div class="square_radial_gradation"></div>
css
.squ...
cssの基本 linear-gradient （線形グラデーション）
linear-gradientプロパティは「線形グラデーション」を指定する場合に使用します。
html
<div class="square_gradation"></div>
css
.square_gra...
cssの基本 box-shadow （影）
box-shadowプロパティは「ボックス要素に影」を指定する場合に使用します。
html
<div class="square_box_shadow"></div>
css
.square_box_shad...
cssの基本 border-radius （角丸）
border-radiusプロパティは「角丸」を指定する場合に使用します。
html
<div class="square_border_radius"></div>
css
.square_border_...
cssの基本 border （枠線）
borderプロパティは「枠線」を指定する場合に使用します。
html
<div class="square_border"></div>
css
.square_border {
width: 100px...
cssの基本 background-color （背景色）
background-colorプロパティは「背景色」を指定する場合に使用します。
html
<div class="square"></div>
css
.square {
width: 100px;
...