css로 다각형 모양을 잡고 border로 다각형 모양에 맞춰 테두리를 두르려 하는데 도와주세요ㅠ

css로 다각형 모양을 잡고 border로 다각형 모양에 맞춰 테두리를 두르려 하는데 도와주세요ㅠ

QA

css로 다각형 모양을 잡고 border로 다각형 모양에 맞춰 테두리를 두르려 하는데 도와주세요ㅠ

답변 3

본문

구글링해서 작업하는 방법은 찾앗는데 어느 영역을 수정해야 모서리를 아래쪽으로 가게 할수 있는지 모르겠습니다.ㅠ 코드는 이렇게 작성했습니다.


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를 안쓰신게 컨텐츠도 같이 돌아가서 그러신듯한데 컨텐츠와 다각형부분을 별도로 두시는게 더 편하실듯..

헐....완전 잘되요ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 진짜 너무너무 감사합니다. 진짜 공부를 좀더 열심히 해야겠네요..ㅠㅠㅠ 덕분에 큰 문제 해결했어요!! 포지션 어디를 돌려야하는지 바도바도 모르겠던데ㅠㅠㅠ 덕분이에요!!! 정말 감사해요ㅠ

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

이것도 참고하셔서 돌리시는게 빠를것 같습니다.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 1,284
© SIRSOFT
현재 페이지 제일 처음으로