CSS로 모양을 만드는 방법

CSS로 모양을 만드는 방법은 무엇입니까?

You can make all sorts of shapes with CSS. This post is about all different kinds of 2D shapes, you can also make 3D shapes with CSS.

Basic shapes like squares and rectangles are quite easy, and used everywhere on the web. Just add a width and height and you have a square or rectangle (depending on the ratio).

If you add the CSS property border-radius , you can make these rectangles and squares into circles and ovals.

CSS has many more properties you can use to create shapes. There are the pseudo-elements ::before and ::after. With these two pseudo-elements we can add two more shapes to the already existing ones (square, rectangle, circle, oval).

By combining all these properties ( border-radiues , ::before , ::after ) with positioning, transforming, rotating, and many others, we are able make a lot of different shapes in CSS.

사각형

.square {
  width: 100px;
  height: 100px;
  background: var(--yellow);
}

직사각형 모양

.rectangle {
  width: 200px;
  height: 100px;
  background: var(--yellow);
}

원 모양

.circle {
  width: 100px;
  height: 100px;
  background: var(--yellow);
  border-radius: 50%;
}

타원형

.oval {
  width: 200px;
  height: 100px;
  background: var(--yellow);
  border-radius: 200px / 100px;
}

삼각형 모양

삼각형 모양 - UP

.triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid var(--yellow);
}

삼각형 모양 - 아래로

.triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid var(--yellow);
}

삼각형 모양 - 왼쪽

.triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid var(--yellow);
  border-bottom: 50px solid transparent;
}

삼각형 모양 - 오른쪽

.triangle-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid var(--yellow);
  border-bottom: 50px solid transparent;
}

사다리꼴 모양

.trapezoid {
  border-bottom: 100px solid var(--yellow);
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 100px;
}

평행사변형 모양

.parallelogram {
  width: 150px;
  height: 100px;
  transform: skew(20deg);
  background: var(--yellow);
}

더 복잡한 모양

With adding the pseudo-elements to your CSS repertoire, it is possible to create more complex shapes and|or combine these shapes.

💰: Start your cloud journey with $100 in free credits with DigitalOcean!

별(6점) 모양

.star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid var(--yellow);
position: relative;
margin-bottom: 2rem;
}
.star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid var(--yellow);
position: absolute;
content: '';
top: 30px;
left: -50px;
}

.star-six {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid var(--yellow);
  position: relative;
}
.star-six:after {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid var(--yellow);
  position: absolute;
  content: '';
  top: 30px;
  left: -50px;
}

별(5점) 모양

.star-five {
margin: 4rem 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid var(--yellow);
border-left: 100px solid transparent;
transform: rotate(35deg);
}
.star-five:before {
border-bottom: 80px solid var(--yellow);
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
transform: rotate(-35deg);
}
.star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid var(--yellow);
border-left: 100px solid transparent;
transform: rotate(-70deg);
content: '';
}

.star-five {
  margin: 50px 0;
  position: relative;
  display: block;
  color: red;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid var(--yellow);
  border-left: 100px solid transparent;
  transform: rotate(35deg);
}
.star-five:before {
  border-bottom: 80px solid var(--yellow);
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -45px;
  left: -65px;
  display: block;
  content: '';
  transform: rotate(-35deg);
}
.star-five:after {
  position: absolute;
  display: block;
  color: red;
  top: 3px;
  left: -105px;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid var(--yellow);
  border-left: 100px solid transparent;
  transform: rotate(-70deg);
  content: '';
}

구부러진 꼬리 화살

.curvedarrow {
position: relative;
width: 0;
height: 0;
border-top: 2rem solid transparent;
border-right: 2rem solid var(--yellow);
transform: rotate(10deg);
}
.curvedarrow:after {
content: '';
position: absolute;
border: 0 solid transparent;
border-top: 0.5rem solid var(--yellow);
border-radius: 1.5rem 0 0 0;
top: -2rem;
left: -1rem;
width: 2rem;
height: 2rem;
transform: rotate(45deg);
}

.curvedarrow {
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid var(--yellow);
  transform: rotate(10deg);
}
.curvedarrow:after {
  content: '';
  position: absolute;
  border: 0 solid transparent;
  border-top: 3px solid var(--yellow);
  border-radius: 20px 0 0 0;
  top: -12px;
  left: -9px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
}

오각형 모양

.pentagon {
position: relative;
width: 54px;
box-sizing: content-box;
border-width: 50px 18px 0;
border-style: solid;
border-color: var(--yellow) transparent;
margin-top: 3rem;
}
.pentagon:before {
content: '';
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent var(--yellow);
}

.pentagon {
  position: relative;
  width: 54px;
  box-sizing: content-box;
  border-width: 50px 18px 0;
  border-style: solid;
  border-color: var(--yellow) transparent;
}
.pentagon:before {
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  top: -85px;
  left: -18px;
  border-width: 0 45px 35px;
  border-style: solid;
  border-color: transparent transparent var(--yellow);
}

하트 모양

.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart:before,
.heart:after {
position: absolute;
content: '';
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: var(--yellow);
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}

.heart {
  position: relative;
  width: 100px;
  height: 90px;
}
.heart:before,
.heart:after {
  position: absolute;
  content: '';
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: var(--yellow);
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

인피니티 셰이프

.infinity {
position: relative;
width: 212px;
height: 100px;
box-sizing: content-box;
}
.infinity:before,
.infinity:after {
content: '';
box-sizing: content-box;
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid var(--yellow);
border-radius: 50px 50px 0 50px;
transform: rotate(-45deg);
}
.infinity:after {
left: auto;
right: 0;
border-radius: 50px 50px 50px 0;
transform: rotate(45deg);
}

.infinity {
  position: relative;
  width: 212px;
  height: 100px;
  box-sizing: content-box;
}
.infinity:before,
.infinity:after {
  content: '';
  box-sizing: content-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  border: 20px solid var(--yellow);
  border-radius: 50px 50px 0 50px;
  transform: rotate(-45deg);
}
.infinity:after {
  left: auto;
  right: 0;
  border-radius: 50px 50px 50px 0;
  transform: rotate(45deg);
}

TL;DR

With basic CSS properties you are already able to create a huge amount of shapes and, with properties like clip-path even more.

Thanks for reading and if you have any questions , use the comment function or send me a message .

If you want to know more about CSS , have a look at these Gatsby Tutorials .

참조(그리고 큰 감사):

CSS Tricks , A List Apart , CSS Shapes Resources

Reference

이 문제에 관하여(CSS로 모양을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mariokandut/how-to-make-shapes-with-css-435o

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

CSS로 모양을 만드는 방법