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

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

QA

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

답변 1

본문

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

  1. position: relative;
  2. background-repeat: no-repeat;
  3. 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);
  4. background-size: 1px 100%,1px 100%,100% 1px,100% 1px,30px 30px,100% 100%,100% 100%;
  5. background-position: 0 0,100% 30px,-30px 0,0 100%,100% 0,-30px 0,100% 30px;

 

지금 현재는 오각형으로 모서리 오른쪽 상단 위에가 잘려서 출력이 되는데 저는 오른쪽 하단 모서리가 잘려서 출력이 되었으면 좋겠습니다. 고수님들 도와주세요ㅠㅠ 어느 부분을 수정해야 지금 값처럼 오른쪽 상단 모서리 영역이 아닌 오른쪽 하단 모서리 영역으로 잘려서 출력될까요 부탁드립니다.ㅠㅠ 5시간동안 헤맷어요ㅠㅠㅠ

이 질문에 댓글 쓰기 :

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