w3.css

CSS 모양

CSS를 사용하여 다양한 모양을 만드는 방법을 알아보자.

정사각형

HTML 추가

<style>
.square {
  height: 50px;
  width: 50px;
  background-color: #555;
}
</style>

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

원

HTML 추가

<style>
.circle {
  height: 50px;
  width: 50px;
  background-color: #555;
  border-radius: 50%;
}
</style>

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

타원형

HTML 추가

<style>
.oval {
  height: 50px;
  width: 100px;
  background-color: #555;
  border-radius: 50%;
}
</style>

<div class="oval"></div>

사다리꼴

HTML 추가

<style>
.trapezoid {
	border-bottom: 50px solid #555;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	height: 0;
	width: 125px;
}
</style>

<div class="trapezoid "></div>

구형

HTML 추가

<style>
.rectangle {
  height: 50px;
  width: 100px;
  background-color: #555;
}
</style>

<div class="rectangle"></div>

평행사변형

HTML 추가

<style>
.parallelogram {
	width: 100px;
	height: 50px;
	transform: skew(20deg);
	background: #555;
}
</style>

<div class="parallelogram"></div>

위로 삼각형

HTML 추가

<style>
.triangle-up {
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 50px solid #555;
}
</style>

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

아래로 삼각형

HTML 추가

<style>
.triangle-down {
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-top: 50px solid #555;
}
</style>

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

왼쪽 삼각형

HTML 추가

<style>
.triangle-left {
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-right: 50px solid #555;
	border-bottom: 25px solid transparent;
}
</style>

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

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기