3
在爲Firefox和Microsoft Edge（ME）製作剪輯標頭時，我使用了clip-path。它只適用於Firefox元素中的clipPath元素和HTML元素中的clip-path樣式。當我在ME上打開相同的代碼時，它不顯示任何內容。如何使剪輯路徑在Microsoft Edge上運行？
html,body,header {
\t margin:0px;
\t 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>
謝謝你這個答案！ – giovannipds