问题
While making a clipped header for Firefox and Microsoft Edge(ME), I used clip-path. It works in Firefox just by putting clipPath element inside an SVG element and a clip-path style inside the HTML element. When I open this same code on ME, it doesn't show anything.
html,body,header {
margin:0px;
height:100%;
font-family: Arial Unicode MS;
}
button:hover {
transition:background-color 0.5s linear;
}
a:hover,li:hover {
opacity: 0.5;
transition:opacity 0.4s linear
}
#header {
width: auto;
height: 100%;
}
/************************** BANNER-SLIDER-HEADER BEGIN ************************/
.carousel,
.item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
-webkit-clip-path: polygon(0 0, 0px 100%, 100% 85%, 100% 0);
clip-path: polygon(0 0, 0px 100%, 100% 85%, 100% 0);
-webkit-clip-path: url("#clipping");
clip-path: url("#clipping");
}
/* Background images are set within the HTML using inline CSS, not here */
.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.fill:before {
position: absolute;
content: '';
background-image: -moz-linear-gradient( -34deg, rgb(1,189,164) 0%, rgb(0,63,130) 100%);
background-image: -webkit-linear-gradient( -34deg, rgb(1,189,164) 0%, rgb(0,63,130) 100%);
background-image: -ms-linear-gradient( -34deg, rgb(1,189,164) 0%, rgb(0,63,130) 100%);
opacity: 0.741;
width: 100%;
height: 100%;
}
.carousel-indicators {
margin-bottom: 50px;
z-index: 3;
}
.controles.izq {
top: 50%;
background-image: none;
}
.controles.der {
right:0;
left: auto;
background-image: none;
top: 50%;
}
.controles {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 15%;
text-align: center;
opacity: 0.5;
color: white;
}
.controles:hover {
opacity: 1;
}
.carousel-caption {
right: 20%;
left: 20%;
top: 20%;
text-align: left;
}
.carousel-caption>h1, .carousel-caption>h2, .carousel-caption>h3{
font-family: Arial Unicode MS;
color: white;
margin: 0px;
padding: 5px 0 5px 0;
}
.carousel-caption>h1 {
font-size: 50px;
}
.carousel-caption>h2 {
font-size: 40px;
}
.carousel-caption>h3 {
font-size: 30px;
}
#banner-text>h1 {
font-size: 35px;
}
#banner-text>h1 {
font-size: 50px;
}
#banner-text>h1 {
font-size: 30px;
}
.carousel-caption>button {
margin-top: 30px;
border-width: 2px;
border-radius: 20px;
border-color: rgb(255, 255, 255);
border-style: solid;
background: none;
width: 167px;
height: 44px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
color: white;
}
.carousel-caption>button:hover {
background-color: white;
color: rgb(1, 189, 164);
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
/************************** BANNER-SLIDER-HEADER ENDS ************************/<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Oswald:300,400,700" rel="stylesheet">
<link href="//db.onlinewebfonts.com/c/11042b651fd7f35b3d432db7b140e5f6?family=Arial+Unicode+MS" rel="stylesheet" type="text/css"/>
<body>
<header>
<div id="header">
<div id="myCarousel" class="carousel slide">
<style>
.carousel-inner {
height: 100%;
-webkit-clip-path: polygon(0 0, 0px 100%, 100% 85%, 100% 0);
clip-path: polygon(0 0, 0px 100%, 100% 85%, 100% 0);
-webkit-clip-path: url("#clipping");
clip-path: url("#clipping");
p
}
</style>
<div class="carousel-inner">
<div class="item active">
<div class="fill" style="background-image:url('images/banner-header.jpg');">
</div>
<div class="carousel-caption">
<h1>工作签证保险</h1>
<h2>485/457/417/462</h2>
<h3>工作访问者医疗保险</h3>
</div>
</div>
</div>
<svg width='0' height='0'>
<defs>
<clipPath id="clipping" clipPathUnits="objectBoundingBox">
<polygon points="0 0, 0 1, 1 0.85, 1 0"/>
</clipPath>
</defs>
</svg>
<!-- Controls -->
<a class="izq controles" href="#myCarousel" data-slide="prev">
<span class="icon-prev"><img src="images/btn-prev.png" alt="prev">
</span>
</a>
<a class="der controles" href="#myCarousel" data-slide="next">
<span class="icon-next"><img src="images/btn-next.png" alt="next">
</span>
</a>
</div>
</div>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</body>回答1:
Microsoft only supports the CSS clip-path property in SVG:
#foo { clip-path: url(#myClipPath) }
#content { position: relative; }
#content span { position: absolute; }
#content span { top:50px; left: 50px; }<div id="content">
<span>Hi</span>
<svg width="400" height="400">
<defs>
<clipPath id="myClipPath">
<circle cx=100 cy=100 r=50 />
</clipPath>
</defs>
<path id="foo" d="M 50,100 Q 150,50 250,100" stroke="hotpink" stroke-width="10" fill="white"></path>
</svg>
</div>Use relative/absolute positioning to layer the HTML content over the SVG as a cross-browser solution.
References
- clip-path attribute | clipPath property (Internet Explorer)
回答2:
Please take a look on my solution. Hopefully, It can help you. Cheers
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 560" style="position:absolute; width: 100%;">
<clipPath id="myClip">
<path d="M 0 560 L 2400 420 L 2400 0 L 0 0 Z" />
</clipPath>
<image clip-path="url('#myClip')" width="2400px" height="750px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://www.myholidaycentre.com.au/wp-content/uploads/sites/25/2016/12/Beach-Banner.jpg" />
</svg>来源：https://stackoverflow.com/questions/39477755/how-to-make-clip-path-work-on-microsoft-edge