css - Borde con una flecha centrada transparente
html5 css3 (3)
Hay dos métodos para lograr esto usando CSS3.
Uno está usando
skewX
en pseudo-elementos mientras que el otro está usando
rotate
en pseudo-elementos.
Ambos métodos
también
son
receptivos
.
Usando Skew:
Este método está adaptado de
la
respuesta de
web-tiki
en
this
hilo.
Básicamente utiliza dos pseudo-elementos (con aproximadamente un 50% de ancho del contenedor) que están sesgados en direcciones opuestas y posicionados adecuadamente para llegar a la forma de la flecha.
Las formas tienen bordes donde el
background
se establece en transparente, lo que significa que los pseudoelementos producirían un borde inferior + efecto de flecha hacia abajo.
El relleno de la flecha siempre sería transparente (o color del cuerpo) en esta muestra.
body {
background: rgb(245, 242, 242);
}
.bordered {
position: relative;
height: 200px;
width: 200px;
margin: 10px;
line-height: 200px;
}
.bordered:after,
.bordered:before {
position: absolute;
content: '' '';
height: 8px;
width: 50%;
bottom: 0px;
}
.bordered:before {
left: 0px;
border-top: 1px solid gray;
border-right: 1px solid gray;
transform-origin: left bottom;
transform: skewX(45deg);
}
.bordered:after {
right: 0px;
border-top: 1px solid gray;
border-left: 1px solid gray;
transform-origin: right bottom;
transform: skewX(-45deg);
}
.bordered img {
width: 150px;
padding: 25px;
vertical-align: middle;
}
/* Just for demo */
.bordered {
transition: all 1s;
text-align: center;
}
.bordered:hover {
height: 250px;
width: 250px;
line-height: 250px;
}
<!-- library included only to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="bordered">
<img src="http://i.imgur.com/0Xqum3A.png" />
</div>
El siguiente método produciría un triángulo transparente de modo que el fondo de la página se vea a través del corte triangular .
body {
background: rgb(245, 242, 242);
}
.bordered {
position: relative;
height: 200px;
width: 200px;
margin: 10px;
background: rgb(200, 200, 200);
background-clip: content-box;
line-height: 200px;
overflow: hidden;
}
.bordered.top {
padding-top: 8px;
}
.bordered.bottom {
padding-bottom: 8px;
}
.bordered:after,
.bordered:before {
position: absolute;
content: '' '';
height: 8px;
width: 50%;
background: inherit;
}
.bordered.top:after,
.bordered.top:before {
top: 0px;
}
.bordered.bottom:after,
.bordered.bottom:before {
bottom: 0px;
}
.bordered:before {
left: 0px;
border-right: 1px solid gray;
}
.bordered.top:before {
border-top: 1px solid gray;
transform-origin: left bottom;
transform: skewX(45deg);
}
.bordered.bottom:before {
border-bottom: 1px solid gray;
transform-origin: left top;
transform: skewX(-45deg);
}
.bordered:after {
right: 0px;
border-left: 1px solid gray;
}
.bordered.top:after {
border-top: 1px solid gray;
transform-origin: right bottom;
transform: skewX(-45deg);
}
.bordered.bottom:after {
border-bottom: 1px solid gray;
transform-origin: right top;
transform: skewX(45deg);
}
.bordered img {
width: 150px;
padding: 25px;
vertical-align: middle;
}
/* Just for demo */
div{
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="bordered top">
<img src="http://i.imgur.com/0Xqum3A.png" />
</div>
<div class="bordered bottom">
<img src="http://i.imgur.com/0Xqum3A.png" />
</div>
Usando Rotar:
Este método utiliza un pseudo-elemento girado (girado 45 grados) para lograr el efecto de flecha hacia abajo y luego se coloca en la parte superior del
border
inferior del
div
.
En este método, el
background
del pseudo-elemento se establece en el mismo color que el
div
que lo contiene.
(
Nota:
en esta muestra, la imagen y el
div
tienen diferentes colores de relleno).
body {
background: lightgray;
}
.colored {
height: 200px;
width: 200px;
position: relative;
margin: 10px;
line-height: 200px;
}
.colored img {
vertical-align: middle;
width: 150px;
padding: 25px;
}
.colored {
background: yellow;
border-bottom: 1px solid gray;
}
.colored:after {
height: 10px;
width: 10px;
position: absolute;
content: '''';
background: yellow;
border: 1px solid gray;
border-top-width: 0px;
border-left-width: 0px;
transform: rotate(45deg);
bottom: -6px;
left: calc(50% - 4px);
}
/* Just for demo */
.colored{
text-align: center;
transition: all 1s;
}
.colored:hover{
height: 250px;
width: 250px;
line-height: 250px;
}
<!-- library included only to avoid prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="colored">
<img src="http://i.imgur.com/0Xqum3A.png" />
</div>
Estoy tratando de diseñar un div con un borde inferior que tenga una flecha apuntando hacia abajo . El div tendrá una imagen y no debe tener un borde superior, derecho o izquierdo. El relleno de la flecha que apunta hacia abajo debe ser el mismo que el div o transparente.
He podido hacer que funcione en su mayor parte usando el siguiente código:
.hero {
position: relative;
background-color: yellow;
height: 320px !important;
width: 100% !important;
border-bottom: 1px solid red;
}
.hero:after {
content: '''';
position: absolute;
top: 100%;
left: 50%;
margin-left: -50px;
width: 0;
height: 0;
border-top: solid 50px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
<div class="hero"></div>
Ver este violín: http://jsfiddle.net/alisamii/tjep3h8t/
Cualquier cosa que intente hacer para "ahuecar" la flecha da como resultado un div sin bordes (por lo que tiene un relleno de color amarillo pero sin borde en ningún lado) o en un borde que rodea todo el div.
¿Alguna ayuda?
No estoy seguro de si esta es la mejor solución, pero una opción podría ser utilizar un
:before
para representar el triángulo naranja y un
:after
para representar un triángulo un poco más pequeño con el color de su fondo.
El triángulo
:after
cubre principalmente el triángulo
:before
dejando solo un pequeño borde naranja triangular.
Lamentablemente, no puede ser transparente si lo resuelve de esta manera.
.hero {
position: relative;
background-color: yellow;
height: 320px !important;
width: 100% !important;
border-bottom: 1px solid red;
}
.hero:before {
content: '''';
position: absolute;
top: 100%;
left: 50%;
margin-left: -50px;
width: 0;
height: 0;
border-top: solid 50px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
.hero:after {
content: '''';
position: absolute;
top: 100%;
left: 50%;
margin-left: -48px;
width: 0;
height: 0;
border-top: solid 48px yellow;
border-left: solid 48px transparent;
border-right: solid 48px transparent;
}
<div class="hero"></div>
Una solución simple donde el fondo de la flecha será transparente, permitiéndole usarlo en fondos cambiantes:
HTML:
<div class="line-separator">
<div class="side-line"> </div>
<div class="triangle"> </div>
<div class="side-line"> </div>
</div>
CSS:
.side-line {
display: inline-block;
border-top: 1px solid black;
width: 20%;
}
.triangle {
display: inline-block;
height: 7px;
width: 7px;
transform: rotate(45deg);
transform-origin: center center;
border-top: 1px solid black;
border-left: 1px solid black;
margin: 0 -3px -3px;
}
Demostración en vivo: http://jsfiddle.net/85saaphw/