Programming/css2018. 10. 10. 19:16

잘 안되네... (예제만은 잘됨.. 내꺼에는 안됨.. ㅠㅠ)

일단 핵심은 :before라는 슈도 태그 인듯..

(근데 난 d3로 svg 그리는데 zindex랑 꼬여서 영 안됨..)


body

{

font-family: arial, helvetica, freesans, sans-serif;

font-size: 100%;

color: #333;

background-color: #ddd;

}


h1

{

font-size: 1.5em;

font-weight: normal;

margin: 0;

  text-align: center;

  padding-top: 1em;

}


#element2

{

width: 12em;

font-size: 2em;

text-align: center;

line-height: 5em;

margin: 3em auto;

border: 2px solid #666;

border-radius: 7px;


  position: relative;

overflow: hidden;

}


#element2:before

{

content: "";

position: absolute;

width: 200%;

height: 200%;

top: -50%;

left: -50%;

z-index: -1;

background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/background.png) 0 0 repeat;

transform: rotate(45deg);


[링크 : https://www.sitepoint.com/css3-transform-background-image/]

[링크 : https://stackoverflow.com/questions/24842026/rotate-background-image-of-div-90-degrees-using-jquery]

'Programming > css' 카테고리의 다른 글

css transform zindex origin  (0) 2018.10.25
css tooltip 위치  (0) 2018.10.25
css 계층 구조? 상속? 선택자 조합자?  (0) 2018.09.05
sass scss  (0) 2018.09.05
hover inline css  (0) 2018.08.27
Posted by 구차니