css - transparente - imagen de fondo, el resultado de borde irregular de gradiente lineal debe ser de bordes suaves
imagen de fondo css pantalla completa (2)
Acabo de encontrar una solución locamente buena en un codepen usando calc(50% - 1px)
https://codepen.io/hellonico/pen/xEYXmL
background: linear-gradient(7deg, currentColor calc(50% - 1px), transparent 50%);
Sin borrosidad alguna, solo un borde liso
EDITAR: .. al parecer no en Safari? ..
Estoy tratando de señalar la parte inferior de una imagen. Intenté obtener este efecto produciendo dos triángulos en la parte inferior. Deben ser receptivos. y después de buscar en Internet con muchos ejemplos que no funcionan para mi requerimiento, este es el mejor hasta ahora que he logrado producir.
body,
html {
height: 100%
}
.image {
width: 1410px;
margin-right: auto;
margin-left: auto;
height: 500px;
overflow: hidden;
position: relative;
}
.pointer {
height: 50px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.triangleWrapper {
width: 50%;
height: 50px;
float: left;
}
.lefttriangle {
width: 100%;
height: 10px;
left: 0px;
top: 0px;
background-image: linear-gradient(to right top, #ffffff 50%, transparent 50%);
}
.righttriangle {
width: 100%;
height: 10px;
right: 0px;
top: 0px;
background: linear-gradient(to left top, #ffffff 50%, transparent 50%)
}
<div class="image">
<img src="http://placekitten.com/1410/500">
<div class="pointer">
<div class="triangleWrapper">
<div style="height: 100%;" class="lefttriangle"></div>
</div>
<div class="triangleWrapper">
<div style="height: 100%;" class="righttriangle"></div>
</div>
</div>
</div>
Funciona exactamente como yo quiero, ya que es receptivo sin la necesidad de consultas de medios. PERO tiene un borde irregular en la línea del triángulo que no es 90deg.
¿Cómo obtengo esto para producir una línea suave en la mayoría, si no en todos, los navegadores modernos? No estoy pidiendo compatibilidad con versiones anteriores.
¡Cualquier ayuda es muy apreciada!
Desafortunadamente, esto siempre sucede cuando utilizamos imágenes en linear-gradient ángulo y, actualmente, la única manera de superar este comportamiento parece ser evitar la detención forzada de los colores (es decir, no hacer que el punto de detención de un color sea el comienzo punto del siguiente). Hacer que el segundo color comience un poco más lejos del punto de detención del primer color crearía un área borrosa y la haría parecer más suave. Esto todavía no es 100% perfecto, pero es mejor que tener bordes dentados.
.lefttriangle {
width: 100%;
height: 10px;
left: 0px;
top: 0px;
background-image: linear-gradient(to right top, #ffffff 48%, transparent 50%); /* note the change of stop and start points */
}
.righttriangle {
width: 100%;
height: 10px;
right: 0px;
top: 0px;
background: linear-gradient(to left top, #ffffff 48%, transparent 50%); /* note the change of stop and start points */
}
body,
html {
height: 100%
}
.image {
width: 1410px;
margin-right: auto;
margin-left: auto;
height: 500px;
overflow: hidden;
position: relative;
}
.pointer {
height: 50px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.triangleWrapper {
width: 50%;
height: 50px;
float: left;
}
.lefttriangle {
width: 100%;
height: 10px;
left: 0px;
top: 0px;
background-image: linear-gradient(to right top, #ffffff 48%, transparent 50%);
}
.righttriangle {
width: 100%;
height: 10px;
right: 0px;
top: 0px;
background: linear-gradient(to left top, #ffffff 48%, transparent 50%);
}
<div class="image">
<img src="http://placekitten.com/1410/500">
<div class="pointer">
<div class="triangleWrapper">
<div style="height: 100%;" class="lefttriangle"></div>
</div>
<div class="triangleWrapper">
<div style="height: 100%;" class="righttriangle"></div>
</div>
</div>
</div>
Implementaciones alternativas:
clip-path : puede usar la característica de clip-path también para producir un efecto similar. La ventaja de usar clip-path es que es sensible y también produce un corte transparente. El clip-path basado en SVG tiene una mejor compatibilidad con el navegador que la versión CSS . Esto aún no es compatible en IE sin embargo.
body,
html {
height: 100%
}
.image {
width: 1410px;
margin-right: auto;
margin-left: auto;
height: 500px;
overflow: hidden;
position: relative;
}
.css-clip {
-webkit-clip-path: polygon(0% 0%, 0% 90%, 50% 100%, 100% 90%, 100% 0%);
clip-path: polygon(0% 0%, 0% 90%, 50% 100%, 100% 90%, 100% 0%);
}
.svg-clip {
-webkit-clip-path: url(#clipper);
-moz-clip-path: url(#clipper);
clip-path: url(#clipper);
}
<!-- CSS Clip-path - Lower browser support -->
<div class="image css-clip">
<img src="http://placekitten.com/1410/500">
</div>
<!-- SVG Clip-path - Better browser support -->
<svg width="0" height="0">
<defs>
<clipPath clipPathUnits="objectBoundingBox" id="clipper">
<path d="M0,0 0,0.9 0.5,1 1,0.9 1,0z" />
</clipPath>
</defs>
</svg>
<div class="image svg-clip">
<img src="http://placekitten.com/1410/500">
</div>
Usar CSS Transform: también puedes intentar usar el enfoque mencionado en esta respuesta . Consigue un efecto puntiagudo en el lado izquierdo, pero debería ser fácil adaptarlo para crear un efecto puntiagudo en el lado inferior.
body,
html {
height: 100%
}
.image {
width: 1410px;
margin-right: auto;
margin-left: auto;
height: 500px;
overflow: hidden;
position: relative;
}
.top-container,
.bottom-container {
position: absolute;
bottom: 0px;
height: 100%;
width: 50%;
overflow: hidden;
backface-visibility: hidden;
}
.top-container {
left: 0px;
transform-origin: right bottom;
transform: skewY(10deg);
}
.bottom-container {
right: 0px;
transform-origin: left bottom;
transform: skewY(-10deg);
background-position: 0% 100%;
}
.top-container:after,
.bottom-container:after {
position: absolute;
content: '''';
height: 100%;
width: 100%;
bottom: -62px; /* tan(10) * (width/2) / 2 */
background: url(http://placekitten.com/1410/500);
background-size: 200% 100%;
}
.top-container:after {
left: 0px;
transform: skewY(-10deg);
}
.bottom-container:after {
right: 0px;
transform: skewY(10deg);
background-position: 100% 0%;
}
<div class="image">
<div class=''top-container''></div>
<div class=''bottom-container''></div>
</div>