CSS - Clip-path ne fonctionne pas bien sur safari

Je développe un menu avec la forme mais en safari cela ne fonctionne pas bien. En safari cela endommage la disposition et je ne sais pas pourquoi. Si je n'utilise pas svg tag et n'utilise que css clip-path cela marche bien dans safari et chrome mais pas dans firefox.CSS - Clip-path ne fonctionne pas bien sur safari

Css:

.menu { 
    width: 65%; 
    height: 40px; 
    background-color: red; 
    -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); 
    clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); 
    -webkit-clip-path: url("#clipping"); 
    clip-path: url("#clipping"); 
    position: absolute; 
    right: 0px; 
    bottom: 0; 
} 

.menu:before { 
    content: ''; 
    width: 99.8%; 
    height: 40px; 
    -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); 
    clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); 
    -webkit-clip-path: url("#clipping"); 
    clip-path: url("#clipping"); 
    background: black; 
    display: block; 
    position: absolute; 
    top: 2px; 
    left: 2px; 
    right: 2px; 
}

html:

<div class="menu"> 
<svg width='0' height='0'> 
    <defs> 
    <clipPath id="clipping" clipPathUnits="objectBoundingBox"> 
    <polygon points="0.05 0, 1 0, 1 1, 0 1, 0 1" /> 
    </clipPath> 
    </defs> 
</svg> 
</div>

Merci

Source

2017-06-18 user3242861

soutien partiel fait référence à des formes de soutien et la syntaxe URL (#foo) pour SVG en ligne, mais pas dans les formes SVGs externes. http://caniuse.com/#search=clip-path – Rob

alors, comment puis-je faire cela? @Rob – user3242861

clip-path propriété css est pas pris en charge par Safari (WebKit) et la plupart des-à-dire, les versions de pointe.

Source

2017-06-18 15:58:49

alors, quelle est la solution? @ VolkanSağ – user3242861

Pourquoi voulez-vous découper div? vous pouvez dessiner n'importe quelle conception avec le chemin de svg que vous voulez. –

Si vous voulez couper, vous devez créer un div avec css-> overflow: hidden; position: relative; et à l'intérieur de cela, vous devez créer une position div: absolue; et à gauche et en haut que vous voulez :) –

Il travaille pour moi dans Safari

<svg viewBox="0 0 250 250"> 
    <polygon points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2" /> 
    <polygon points="125,30 125,52.2 125,52.1 125,153.4 125,153.4 125,230 125,230 203.9,186.3 218.1,63.2 125,30" /> 
    <path d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1 
     L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/> 
</svg>

Source

2017-06-18 16:04:57

si je sors le clip-path css: url() cela fonctionne bien dans Safari, mais ne fonctionne pas dans Firefox. @AbdullahKanza – user3242861

CSS - Clip-path ne fonctionne pas bien sur safari

Répondre

Questions connexes