css로 다각형 모양을 잡고 border로 다각형 모양에 맞춰 테두리를 두르려 하는데 도와주세요ㅠ
본문
구글링해서 작업하는 방법은 찾앗는데 어느 영역을 수정해야 모서리를 아래쪽으로 가게 할수 있는지 모르겠습니다.ㅠ 코드는 이렇게 작성했습니다.
position: relative;
background-repeat: no-repeat;
background-image: linear-gradient(#dfdfdf,#dfdfdf),linear-gradient(#dfdfdf,#dfdfdf),linear-gradient(#dfdfdf,#dfdfdf),linear-gradient(#dfdfdf,#dfdfdf),linear-gradient(to bottom left,transparent calc(50% - .5px),#dfdfdf calc(50% - .5px),#dfdfdf calc(50% + 0.5px),#fff calc(50% + 0.5px)),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
background-size: 1px 100%,1px 100%,100% 1px,100% 1px,30px 30px,100% 100%,100% 100%;
background-position: 0 0,100% 30px,-30px 0,0 100%,100% 0,-30px 0,100% 30px;
지금 현재는 오각형으로 모서리 오른쪽 상단 위에가 잘려서 출력이 되는데 저는 오른쪽 하단 모서리가 잘려서 출력이 되었으면 좋겠습니다. 고수님들 도와주세요ㅠㅠ 어느 부분을 수정해야 지금 값처럼 오른쪽 상단 모서리 영역이 아닌 오른쪽 하단 모서리 영역으로 잘려서 출력될까요 부탁드립니다.ㅠㅠ 5시간동안 헤맷어요ㅠㅠㅠ
답변 3
3. background-image: linear-gradient(#dfdfdf,#dfdfdf),linear-gradient(#dfdfdf,#dfdfdf),linear-gradient(#dfdfdf,#dfdfdf),linear-gradient(#dfdfdf,#dfdfdf),linear-gradient(to bottom right,transparent calc(50% - .5px),#dfdfdf calc(50% - .5px),#dfdfdf calc(50% + 0.5px),#fff calc(50% + 0.5px)),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
5. background-position: 0 0,100% -30px,0 0,-30px 100%,100% 100%,100% 100%,100% 100%;
이렇게 해보실래요?
+) 이렇게 수치를 직접 수정할 것 없이
transform:rotate(90deg);
위처럼 rotate 속성을 90도 단위로 수정하는게 더 편하긴 합니다^^;
아마 rotate를 안쓰신게 컨텐츠도 같이 돌아가서 그러신듯한데 컨텐츠와 다각형부분을 별도로 두시는게 더 편하실듯..
헐....완전 잘되요ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 진짜 너무너무 감사합니다. 진짜 공부를 좀더 열심히 해야겠네요..ㅠㅠㅠ 덕분에 큰 문제 해결했어요!! 포지션 어디를 돌려야하는지 바도바도 모르겠던데ㅠㅠㅠ 덕분이에요!!! 정말 감사해요ㅠ
before after사용하시고 rotate로 이리저리 굴려보면 되지않을까요?
https://webisfree.com/2014-01-12/[css]-transform-%EC%86%8D%EC%84%B1%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-%ED%9A%8C%EC%A0%84-%EC%9D%B4%EB%8F%99-%ED%81%AC%EA%B8%B0-%EA%B8%B0%EC%9A%B8%EA%B8%B0-%EB%93%B1-%ED%9A%A8%EA%B3%BC-%EC%A3%BC%EA%B8%B0
이것도 참고하셔서 돌리시는게 빠를것 같습니다.