CSS만 사용하여 사각형 만들기
1175 단어 CSS
하고 싶은 일
돌파하다
padding-bottom는 y 방향에 영향을 주는 속성이며, 여기서 지정하면% x 방향을 기준으로 그리기Example
이 빨간색 정사각형은 CSS에서만 제작됩니다.
index.jadedoctype html
html
head
link(href="styles/main.css" rel="stylesheet")
body
.square-wrapper
.spacer
.content
main.stylus.square-wrapper
position relative
width 10%
.spacer
width 100%
padding-bottom 100%
.content
position absolute
top 0
right 0
bottom 0
left 0
background red
이 경우 .spacer폭.square-wrapper과 같은 높이를 확보한다.
이렇게 되면 .square-wrapper의 높이도 확장되고 결과.content도 정사각형이 된다.
참조 링크
How can I create a perfectly square DIV where height is equal to viewport?
Reference
이 문제에 관하여(CSS만 사용하여 사각형 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/usp/items/96f3cf9997ebb5b3dbb9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
doctype html
html
head
link(href="styles/main.css" rel="stylesheet")
body
.square-wrapper
.spacer
.content
.square-wrapper
position relative
width 10%
.spacer
width 100%
padding-bottom 100%
.content
position absolute
top 0
right 0
bottom 0
left 0
background red
How can I create a perfectly square DIV where height is equal to viewport?
Reference
이 문제에 관하여(CSS만 사용하여 사각형 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/usp/items/96f3cf9997ebb5b3dbb9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
