질문

필 오프 스타일의 html / css로 button을 만들었습니다.내 질문은 button 디자인과 일치하도록 삼각형의 테두리 반경을 어떻게 설정합니까? 개선에 대한 제안도 감사하겠습니다. 감사

.offer-button-wrapper .coupon   {
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 17px;
  text-align: center;
  letter-spacing: 0.51px;
  text-transform: uppercase;
  color: #2C9E25;
  text-decoration: none;
  position: relative;
  text-transform: capitalize;
}
.offer-button-wrapper .coupon:before   {
  content: '';
  position: absolute;
  top: 0;
  right: -185px;
  border-top: 20px solid #E2E2E2;
  border-left: 20px solid #2C9E25;
  width: 0;
  z-index: 1;
}

<div class="offer-button-wrapper">
   <a href="#" class="coupon">
      <div class="coupon-background">Reveal Coupon</div>
   </a>
</div>
</div>

Expand snippet

답변1

CSS 속성 border-top-right-radius 및 border-bottom-left-radius 를 사용하여 원하는 테두리 반경을 제공 할 수 있습니다. 그러나 이러한 속성을 올바르게 사용하려면 테두리를 두 개가 아닌 네면 모두에 적용해야합니다. 아래는 완전한 솔루션입니다.

.offer-button-wrapper .coupon {
  font-family: Montserrat, sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.51px;
  text-transform: uppercase;
  color: #2C9E25;
  text-decoration: none;
  position: relative;
  text-transform: capitalize;
  
  display: inline-block;
  border: 2px solid #2C9E25;
  padding: 10px 30px;
  background-color: #f5fff4;
  border-radius: 5px;
}

.offer-button-wrapper .coupon:before {
  content: '';
  position: absolute;
  
  top: -2px;
  right: -2px;
  border-top: 10px solid #E2E2E2;
  border-bottom: 10px solid #2C9E25;
  border-right: 10px solid #E2E2E2;
  border-left: 10px solid #2C9E25;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

<div class="offer-button-wrapper">
  <a href="#" class="coupon">
    <div class="coupon-background">Reveal Coupon</div>
  </a>
</div>

Expand snippet

답변2

다음은 업데이트 된 코드입니다. 방금 : before 콘텐츠의 위치를 변경했습니다. 여기에는 정확한 배경색을 넣어야 벗겨지는 스타일을 얻을 수 있습니다.

.offer-button-wrapper {
        position: relative;
        width: fit-content;
        height: fit-content;
        border: 2px solid #2C9E25;
        border-radius: 5px;
        padding: 1rem 1.5rem;
    }
    .offer-button-wrapper .coupon {
        font-family: Montserrat;
        font-style: normal;
        font-weight: bold;
        font-size: 14px;
        line-height: 17px;
        text-align: center;
        letter-spacing: 0.51px;
        text-transform: uppercase;
        color: #2C9E25;
        text-decoration: none;
        position: relative;
        text-transform: capitalize;
    }
    .offer-button-wrapper:before {
        content: '';
        position: absolute;
        top: -2px;
        right: -2px;
        border-top: 20px solid #ffffff;
        border-left: 20px solid #2C9E25;
        width: 0;
        z-index: 1;
    }

<div class="offer-button-wrapper">
   <a href="#" class="coupon">
      <div class="coupon-background">Reveal Coupon</div>
   </a>
</div>
</div>

Expand snippet

답변3

SVG : 실제로 CSS보다 쉽습니다.

나는 당신이 45도 모서리를 둥글게 만들려고한다고 가정했지만,이 대답이 끝날 때까지 당신이 그렇지 않을 수도 있다는 것을 깨닫지 못했습니다.

그러나 사용자 정의 모양을 만드는 가장 좋은 방법은 내 생각에 svg를 사용하여 그리는 것입니다. 직접 작성하거나 벡터 프로그램을 사용하여 미쳐 버릴 수 있지만, 이와 같은 간단한 것은 일반 HTML처럼 작성하기에 충분히 쉽습니다.

CodePen 작업 샘플

  <svg>
    <path d="M 140 10
             H 270
             q 5 0, 10 5 
             L 285 20
             q 5 5, 5 10
             V 80
             q 0 10, -10 10
             H 20
             q -10 0, -10 -10
             V 20
             q 0 -10, 10 -10
             Z "
     style="fill:rgb(230,255,230);stroke:rgb(40,150,50)"/>
    <path d="M 270 10
             q 5 0, 10 5 
             L 285 20
             q 5 5, 5 10
             H 275
             q -5 0 -5 -5
             Z "
     style="fill:rgb(40,150,50);stroke:rgb(40,150,50)"/>
  </svg>