지그재그 모양을 얻으려면 CSS 테두리 이미지를 사용하십시오.

Css에서 이러한 스타일을 구현하는 방법:

해결책:

• 여기서 필요한 기술은 테두리 이미지를 유연하게 사용하는 것입니다. 먼저 여기서는 다음과 같은 이미지를 선택했습니다. 이 사진을 사용하여 원의 색상을 변경하여 톱니의 색상을 변경할 수 있습니다.

하단은 투명하고 정사각형이며 PS 스크린샷은 다음과 같습니다.

좋아요. 실제 코드를 시작하세요:

html:

<section class="ele-card">
    <p class="ele-card-borderImage"></p></section>

css:

.ele-card{
    height: 130px;
    width: 70%;
    position: absolute;
    z-index: 99;
    top: 26%;
    left: 50%;
    margin-left: -35%;
    background: #fee94e;
}.ele-card-borderImage{
    border-top: 15px solid transparent;
    border-image: url(../img/order_border-min.png) 111 44 round;
    width: 100%;
    position: relative;
    top: -4px;
}

위 내용은 지그재그 모양을 얻으려면 CSS 테두리 이미지를 사용하십시오.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!