>

텍스트 안에 아래쪽을 향한 오각형 모양을 만들려고합니다. 몇 가지 예가 있습니다 ( 배경 div를 내부 곡선으로 만드는 방법 HTML, CSS를 사용 하시겠습니까? , Clippy-CSS 클립 경로 작성기 ) 내가 찾고있는 정확한 솔루션 (아래 그림 참조).

도움을 주시면 감사하겠습니다.

문제를 해결했습니다 :

나는 이전에:: after의사 요소를 사용하지 않았습니다. 의사 요소는 요소의 컨텐츠 뒤에 컨텐츠를 삽입합니다. 위의 출력은 상자와 아래쪽 삼각형을 사용하여 파생됩니다.

.card {
    margin: 15px;
    background: #ccc;
    position: relative;
}
.card:after {
    content: '';
    display: block;
    position: absolute;
    border-left: 350px solid transparent;
    border-right: 350px solid transparent;
    border-top: 40px solid #ccc;
    left: 1px;
}
 <div class="boss-card">
  <div class="row">
    <div class="col-md-12">
      <p>Lorem Ipsum</p>
     </div>
   </div>
</div>

  • 답변 # 1

    이 작업은clip-path를 사용하여 수행 할 수 있습니다.

    기본 예-

    clip-path: polygon(50% 100%, 100% 50%, 75% 0, 25% 0, 0% 50%);
    
    

    여기에서 추가 정보를 볼 수 있습니다

  • 답변 # 2

    클립 경로를 사용할 수 있습니다 :

    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    
    

    웹킷을 사용하는 것을 잊지 마십시오 :

    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    
    

    예 :

    .box {
    background-color: gray;
    -webkit-clip-path: polygon(100% 0, 100% 39%, 52% 83%, 0 44%, 0 0);
    clip-path: polygon(100% 0, 100% 39%, 52% 83%, 0 44%, 0 0);
    height: 200px
    }
    h2 {
    text-align: center;
    }
    
    

    <div class="box">
       <h2>Lorum Ipsum</h2>
    </div>
    
    

    쉬운 클립 경로를 만들기 위해이 웹 사이트 (https://bennettfeely.com/clippy/)를 사용할 수 있습니다.

  • 이전 Jenkins Pipeline의 Docker Container가 몇 초 후에 죽습니다
  • 다음 Nifi에서 복잡한 조인 수행