Ich machte einen "Radar" -Effekt innerhalb eines hexagonalen Div. Es ist ein Bild, das rotiert und es gibt einen Clip-Pfad, der es so aussehen lässt, als wäre es im Hexagon. HierCSS-Clip-Pfad funktioniert nicht in Chrome 63
ist ein Fiddle des gleichen Code auf meinem Projekt: https://jsfiddle.net/f6633a79/17/
body{
background : gray;
}
$azul : #3399dd;
$sombra : 0px 0px 35px 2px $azul;
.center{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
z-index: -99;
}
.retentor{
height: 100%;
width: 87px;
left: -50%;
z-index: 1;
position: relative;
//clip-path: url(#svgPath);
clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
}
.hexagon .pointer {
position: absolute;
z-index: 1024;
left: -10px;
right: -10px;
top: -10px;
bottom: 50%;
will-change: transform;
transform-origin: 50% 100%;
border-radius: 50% 50% 0 0/100% 100% 0 0;
background-image: linear-gradient(135deg,
rgba(255, 255, 255, 0.8) 0%,
rgba(255, 255, 255, 0.02) 70%,
rgba(255, 255, 255, 0) 100%
);
-webkit-clip-path: polygon(100% 0,
100% 10%,
50% 100%, 0 100%, 0 0);
clip-path: polygon(100% 0,
100% 10%,
50% 100%, 0 100%, 0 0);
animation: rotate360 3s infinite linear;
}
@keyframes rotate360 {
0% {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
#hex1 {
width: 75px;
height: 75px;
}
#radar {
background-color: #39D;
}
.centralizador{
position: absolute;
left: 50%; \t
}
.hexagon-wrapper {
text-align: center;
position: relative;
display: inline-block;
}
.hexagon {
height: 100%;
width: 57.735%;
display: inline-block;
}
.hexagon:before {
position: absolute;
top: 0;
right: 21.1325%;
background-color: inherit;
height: inherit;
width: inherit;
content: '';
transform: rotate(60deg);
}
.hexagon:after {
position: absolute;
top: 0;
right: 21.1325%;
background-color: inherit;
height: inherit;
width: inherit;
content: '';
transform: rotate(-60deg);
}
.hexagonshadow {
height: 100%;
width: 57.735%;
display: inline-block;
position: absolute;
left: 20%;
z-index: -6;
box-shadow: $sombra;
animation: shadow 3s infinite ease;
}
@keyframes shadow {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.hexagonshadow:before {
position: absolute;
top: 0;
right: 21.1325%;
background-color: inherit;
height: inherit;
width: inherit;
content: '';
transform: rotate(60deg);
box-shadow: $sombra;
}
.hexagonshadow:after {
position: absolute;
top: 0;
right: 21.1325%;
background-color: inherit;
height: inherit;
width: inherit;
content: '';
transform: rotate(-60deg);
box-shadow: $sombra;
}<div class="center">
<div id="hex1" class="hexagon-wrapper">
<div id="radar" class="hexagon">
<div class="retentor">
<div class="pointer"></div>
</div>
</div>
<div class="hexagonshadow"></div>
</div>
</div>
<svg width="0" height="0">
<defs>
<clipPath id="svgPath" clipPathUnits="objectBoundingBox">
<polygon points="0 0.5, 0.25 0, 0.75 0, 1 0.5, 0.75 1, 0.25 1" />
</clipPath>
</defs>
</svg>Das Problem ist, dass der Clip-Pfad (und -webkit-Clip-Pfad) nicht funktioniert auf der ionischen Seite, sogar auf Google Chrome und Firefox für Android, aber funktioniert perfekt auf dem PC, durch Ionic dienen auch. Hier
ist das Ergebnis auf dem Gerät:
Ich fand this topic, die verwandt zu sein scheint, aber der Vorschlag SVG auf dem Clip zu verwenden Pfade Stills zu keinem Ergebnis führen. (Sie können beide Methoden der Clip-Pfadsuche auf der CSS-Datei finden)
Ideen?
--EDIT--
Es scheint, dass Chrome partial support muss Pfad Clip, zu Formen und Inline SVGs. Aber selbst mit der Shape-Eigenschaft funktioniert es nicht richtig. (Aber Firefox zeigt korrekt mit Polygon) Ich suche, was die Inline-Svg bedeutet.
--edit 2--
Clip-Pfad arbeitet an Chrome 62. Es scheint, dass es ein Fehler ist.