CSS에서 중간 선이 끊어진 상자를 그립니다.

친구로부터 처음으로 사이트 코딩 요청을 받아 기뻐했다면
굉장히 고민하는 곳이 있었기 때문에, 친구에게의 원한과 스킬 업의 기쁨을
담아 기사에 남겨 둡니다.

친구로부터 받은 사이트 디자인의 일부


뭐야 평범한 박스야! 쉽고 쉬운
,,,,,


어쩐지 도중에 끊어졌습니다.
거기에서 반나절 격투! !

올바른 방법인지 확실하지 않지만 다음과 같은 방법으로 할 수 있습니다.

index.html

          <div class="contact-form-box contact-form-centerbox">
            <div class="flex contact-form-address">
              <p>
                500 Terry Francois St.<br />
                San Francisco<br />CA 94158
              </p>
            </div>
          </div>

style.css

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-form-box{
  max-width: 320px;
  width: calc(100%/3);
  height: 300px;
}
.contact-form-address{
  /* ここで枠線の高さを変えている */
  height: 90%;
  width: 100%;
  box-sizing: border-box;
  border-right: 1px solid;
  border-left: 1px solid;
}
.contact-form-address{
  height: 90%;
  width: 100%;
  box-sizing: border-box;
  border-right: 1px solid;
  border-left: 1px solid;
}

결과
(SNS 아이콘이 다른 것은 보지 않았던 것에)


positin:absolute;
top:-10px;
라든지 여러가지 시도했지만 잘 되지 않고, 이 방법으로 어떻게든 할 수 있었습니다.
그 밖에 뭔가 좋은 방법이 있으면 교수해 주셨으면 합니다.

여기까지 읽어 주셔서 감사합니다.