홈>2020-03-18 13:35

CSS를 사용하여 아래쪽을 가리키는 오각형 모양 안의 텍스트

텍스트 안에 아래쪽을 향한 오각형 모양을 만들려고합니다. 몇 가지 예가 있습니다 ( 배경 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>

css

답변 # 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/)를 사용할 수 있습니다.

Python2.net

CSS를 사용하여 아래쪽을 가리키는 오각형 모양 안의 텍스트

관련 자료