Question

在为Firefox和Microsoft Edge（ME）制作剪辑标题时，我使用了clip-path。它只适用于Firefox中的clipPath元素和HTML元素中的clip-path样式。当我在ME上打开相同的代码时，它并没有显示任何内容。

＆＃13;

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 ************************/

＆＃13;

<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>

＆＃13;

Answer 1

当我自己遇到此问题时，我发现this article很有用。

我最终使用和::after元素带有边框，例如：

header::after {
  position:absolute;
  content: " ";
  display:block;
  left:0;
  bottom:-20px;
  width:100%;
  border-style: solid;
  border-width: 0 100vw 20px 0;
  border-color: transparent rgba(0,0,0,0.4) transparent transparent;
}

您可以调整border-width和border-color属性以满足您的需求。

Answer 2

请采取我的解决办法看看。我们希望，它可以帮助你。干杯

<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>

如何使剪辑路径在微软边缘工作？

2 个答案: