【CSS】CSSで図形を作図する【DEMO】

ホーム » N-PLUS 全記事一覧 » DEMO » 【CSS】CSSで図形を作図する【DEMO】

【CSS】CSSで図形を作図する【DEMO】

CSS／DEMO

四角形

■CSS CODE

.square {
width: 100px;
height: 100px;
background: black;
margin:0 auto;
}

■HTML CODE

<div class="square"></div>

円

■CSS CODE

.circle {
width: 100px;
height: 100px;
background: black;
border-radius: 50px;
margin:0 auto;
}

■HTML CODE

<div class="circle"></div>

角丸の四角形

■CSS CODE

.square2 {
width: 100px;
height: 100px;
background: black;
border-radius: 40px 0 40px 0; /*左上,右下に40px*/
margin:0 auto;
}

■HTML CODE

<div class="square2"></div>

三角形

■CSS CODE

.triangle {
width: 0px;
height: 0px;
background: transparent;
border-bottom: 150px solid black;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
margin:0px auto;
}

■HTML CODE

<div class="triangle"></div>

回転

■CSS CODE

.square-rotate {
width: 100px;
height: 100px;
background: black;
transform: rotate(45deg);
margin:20px auto;
}

■HTML CODE

<div class="square-rotate"></div>