범용 브라우저를 지원하는 Clip-Path를 대체하는 방법

범용 브라우저를 지원하는 Clip-Path를 대체하는 방법

몇 가지 클립패스 폴리곤 모양을 사용하여 아래쪽으로 향하는 콘텐츠박스를 작성했습니다.여기 홈페이지에서 몇 가지 예를 보실 수 있습니다.http://550.9f2.myftpupload.com/ 에서 사용하고 있는 CSS는 다음과 같습니다.

.bottom_arrow {
-webkit-clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
}

그러나 파이어폭스에서는 .svg URL을 사용하지 않으면 동작하지 않으며 IE와 Edge에서도 동작하지 않는 것을 알고 있습니다.크로스 브라우저 지원이 뛰어난 쉐이프를 만들기 위해 사용할 수 있는 대체 CSS 트릭이 있습니까?

이 질문은 최근에 답이 없어서 혹이 생겼다.2020년, 우리는 지금 이 세상에서 살고 있습니다.clip-path는 거의 보편적으로 지원됩니다.따라서 브라우저가 따라잡았고 사건은 종결되었다고 봐도 무방할 것 같습니다!

이 사이트 http://mindcloak.com/vici/에서 이 문제를 발견했습니다.

이 문제를 회피하는 방법은 이러한 브라우저에서 클립 경로를 숨기고 css 모양을 사용하는 것입니다.

정규 클립 패스

.tri-green-left {
    width: 101%;
    height: 400px;
    position: absolute;
    z-index: 15;
    background: rgba(93,140,127,0.7);
    -webkit-clip-path: polygon(0 0, 5% 0, 25% 100%, 0 100%);
    clip-path: polygon(0 0, 5% 0, 25% 100%, 0 100%);
}

지원되지 않는 브라우저에 대해 표시하는 css 모양

/* IE 10+ 스타일링 스탭*/ @media all 및 (-ms-high-contrast: none), (-ms-high-contrast: active) {

    #triangle-greenleft {
        width: 0;
        height: 0;
        margin-top: -50px;
        border-bottom: 900px solid rgba(93,140,127,0.7);
        border-right: 750px solid transparent;
        overflow: hidden;
    }

/* Egde 브라우저 지원 */ @supports (-ms-ime-align:auto) {

    #triangle-greenleft {
        width: 0;
        height: 0;
        border-bottom: 700px solid rgba(93,140,127,0.7);
        border-right: 200px solid transparent;
        overflow: hidden;
    }

언급URL : https://stackoverflow.com/questions/42072504/alternative-to-clip-path-with-universal-browser-support