CSSだけで三角形・円を作る方法 [CSS] | IT SKILL MAP STUDY -- WEBプログラミング知識【実務的なHTML,CSS,JavaScript,JQuery,PHPの知識】

CSSだけで三角形を作る方法

　ここではボックスモデルのborderプロパティを利用することで三角形を作ります。

borderプロパティを利用して三角形を作ります。

　前提としてborderがボックスの内側に表示されるようbox-sizing:border-box;を設定して下さい。

結果
HTML
CSS

```
/* HTMLの例 */
	
	
```

/* CSSの例 */

.sample1 {
	box-sizing:border-box;
	width:100px;
	height:100px;
	border-top: 50px solid skyblue;
	border-left:50px solid transparent;
	border-right:50px solid transparent;
	border-bottom:50px solid transparent;
}

結果
HTML
CSS

```
/* HTMLの例 */
	
	
```

/* CSSの例 */

.sample2 {
	box-sizing:border-box;
	width:100px;
	height:100px;
	border-top: 50px solid transparent;
	border-left:50px solid skyblue;
	border-right:50px solid transparent;
	border-bottom:50px solid transparent;
}

結果
HTML
CSS

```
/* HTMLの例 */
	
	
```

/* CSSの例 */

.sample3 {
	box-sizing:border-box;
	width:100px;
	height:100px;
	border-top: 50px solid transparent;
	border-left:50px solid transparent;
	border-right:50px solid skyblue;
	border-bottom:50px solid transparent;
}

結果
HTML
CSS

```
/* HTMLの例 */
	
	
```

/* CSSの例 */

.sample4 {
	box-sizing:border-box;
	width:100px;
	height:100px;
	border-top: 50px solid transparent;
	border-left:50px solid transparent;
	border-right:50px solid transparent;
	border-bottom:50px solid skyblue;
}

　～　三角形が表示される仕組み　～　

CSSだけで円を作る方法

　ここではボックスモデルのborder-radiusプロパティを利用することで円を作ります。

border-radiusプロパティを利用して円を作ります。

結果
HTML
CSS

```
/* HTMLの例 */
	
	
```

/* CSSの例 */

.sample5 {
	width:100px;
	height:100px;
	background:skyblue;
	border-radius:50px;

}

　～　円が表示される仕組み　～　

　正方形のボックスモデルを描写したあと、例えば縦横100pxであれば角の丸めを指定するborder-radiusを50px以上に指定することで円になります。