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

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

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시간동안 헤맷어요ㅠㅠㅠ