CSS를 통해 한쪽에 각지고 둥근 모서리가 있는 상자를 만드는 방법은 무엇입니까?

Question

저는 현재 이런 것을 만들어야 한다고 생각합니다.

처음에는 클립 경로를 사용하려고 생각했는데 둥근 모서리가 떼어내기 어렵고, 내용으로 인해 버튼 너비가 변경될 때 22.5도를 유지하기가 어렵습니다.

그래서 저는 결국 각 버튼을 두 개의 div로 만들었습니다. 하나의 div는 22.5도 기울어지고 일반 직사각형 div와 겹쳐졌습니다. 그런 다음 둘 다에 테두리 반경을 추가했습니다.

본체 {
  줄 높이: 0;
  글꼴 크기: 16px;
  배경색: 검정색;
}

.cta-버튼-그룹 {
  디스플레이: 플렉스;
  간격: 2rem;
  항목 정렬: 중앙;
}

.button-angular-wrapper-left {
  디스플레이: 플렉스;
  격리: 격리하다;
  위치: 상대;
  높이: 40px;
  너비: 내용에 맞게;
}

.button-angular-wrapper-left .button-angular-main {
  테두리 반경: 7px 0 0 7px;
  높이: 100%;
  디스플레이: 인라인 그리드;
  장소 항목: 센터;
  패딩 인라인: 8px 16px;
  오른쪽 여백: 13px;
  전환: 배경색 50ms;
}

.button-각도-래퍼-왼쪽 .button-각도-기울기 {
  테두리 반경: 0 7px 7px 0;
  높이: 100%;
  너비: 24px;
  위치: 절대;
  오른쪽: 0;
  상단: 0;
  하단: 0;
  Z-색인: -1;
  전환: 배경색 50ms;
}

.button-angular-wrapper-left .button-angular-slant.back-slash {
  변환: 기울이기X(22.5deg);
}

.button-angular-wrapper-left .button-angular-slant.forward-slash {
  변환: 기울이기X(-22.5deg);
}

.button-angular-wrapper-left.button-angular-color-solid-white .button-angular-main,
.button-angular-wrapper-left.button-angular-color-solid-white .button-angular-slant {
  배경: 흰색;
  테두리: 3px 단색 흰색;
  파란색;
}

.button-angular-wrapper-left.button-angular-color-solid-white .button-angular-main {
  국경 오른쪽: 없음;
}

.button-angular-wrapper-left.button-angular-color-solid-white .button-angular-slant {
  테두리 왼쪽: 없음;
}

.button-angular-wrapper-right {
  디스플레이: 플렉스;
  격리: 격리하다;
  위치: 상대;
  높이: 40px;
  너비: 내용에 맞게;
}

.button-angular-wrapper-right .button-angular-main {
  테두리 반경: 0 7px 7px 0;
  높이: 100%;
  디스플레이: 인라인 그리드;
  장소 항목: 센터;
  패딩 인라인: 8px 16px;
  왼쪽 여백: 13px;
}

.button-각도-래퍼-오른쪽 .button-각도-기울기 {
  테두리 반경: 7px 0 0 7px;
  높이: 100%;
  너비: 24px;
  위치: 절대;
  왼쪽: 0;
  상단: 0;
  하단: 0;
  Z-색인: -1;
}

.button-angular-wrapper-right .button-angular-slant.back-slash {
  변환: 기울이기X(22.5deg);
}

.button-angular-wrapper-right .button-angular-slant.forward-slash {
  변환: 기울이기X(-22.5deg);
}

.button-angular-wrapper-right.button-angular-color-outline-white .button-angular-main,
.button-angular-wrapper-right.button-angular-color-outline-white .button-angular-slant {
  테두리: 3px 단색 흰색;
}

.button-angular-wrapper-right.button-angular-color-outline-white .button-angular-main {
  테두리 왼쪽: 없음;
}

.button-angular-wrapper-right.button-angular-color-outline-white .button-angular-main .icon-call {
  색상: 흰색;
}

.button-angular-wrapper-right.button-angular-color-outline-white .button-angular-main .cta-text {
  색상: 흰색;
}.button-angular-wrapper-right.button-angular-color-outline-white .button-angular-slant {
  국경 오른쪽: 없음;
}

  

    

      
        지금 자세히 알아보세요
      
    
    

    
  
  

    

      
        1800-1-5555
      
    
    

    
  

Answer 1

저는 의사 요소를 사용하여 이 접근 방식을 시도했습니다. 모양의 왼쪽은 ::before 요소이며 호버 효과를 얻기 위해 버튼과 의사 요소의 특정 측면을 보이지 않게 만들고 특정 모서리의 테두리 반경을 변경했습니다.

으아악 으아악