Mientras que hacer un recorte de encabezado para Firefox y Microsoft Borde(ME), he utilizado clip-path. Funciona en Firefox solo con poner clipPath elemento dentro de un elemento SVG y un clip-path estilo dentro del elemento HTML. Cuando abro este mismo código en MÍ, no muestra nada.

CSS:

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

HTML:

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

InformationsquelleAutor Kenny Amaro | 2016-09-13

2 Comentarios

  1. 8

    Microsoft sólo admite el CSS clip-path propiedad en SVG:

    CSS:

    #foo { clip-path: url(#myClipPath) }
    #content { position: relative; }
    #content span { position: absolute; } 
    #content span { top:50px; left: 50px; }

    HTML:

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

    Uso relativo/absoluto la posición de la capa en el HTML de contenido a través de SVG como un cross-browser solución.

    Referencias

    • Gracias por esta respuesta!
    • El problema que tengo es que estoy creando de forma dinámica un número variable de gráficos que cambiar el tamaño de la ventana. Yo no puedo codificar el CSS, pero tendría que crear dinámicamente CSS separado entradas para todo. Lo extraño es, al representar el SVG para un Lienzo para obtener una imagen, la clippath funciona bien. Es sólo la representación en la pantalla que no es compatible con la línea de referencia.
    • Lástima que el borde todavía no lo admite ;(
  2. -1

    Por favor, eche un vistazo en mi solución.
    Esperemos Que te puede ayudar.
    Saludos

    HTML:

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

Dejar respuesta

Please enter your comment!
Please enter your name here