Intento usar un color hexadecimal personalizado para mi triángulo CSS (borde). Sin embargo, dado que usa propiedades de borde, no estoy seguro de cómo hacerlo. Me gustaría mantenerme alejado de javascript y css3 simplemente por compatibilidad. Estoy tratando de que el triángulo tenga un fondo blanco con un borde de 1 px (alrededor de los lados en ángulo del triángulo) con el color # CAD5E0. es posible? Esto es lo que tengo hasta ahora:
.container {
margin-left: 15px;
width: 200px;
background: #FFFFFF;
border: 1px solid #CAD5E0;
padding: 4px;
position: relative;
min-height: 200px;
}
.container:after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 100%;
width: 0;
height: 0;
border-color: transparent transparent transparent #CAD5E0;
border-style: solid;
border-width: 10px;
}Mi violín: http://jsfiddle.net/4ZeCz/
css
border
css-shapes
Ed R
fuente
fuente
border-coloratributo, dependiendo del borde de color, el triángulo apuntará en una dirección diferente. Para girar la flecha para apuntar a la izquierda, cambieborder-coloratransparent #e3f5ff transparent transparent;en ambos,.container:aftery.container:beforeSé que lo acepta, pero verifique este también con menos css:
http://jsfiddle.net/4ZeCz/3/
fuente
-webkit-prefijo (y-ms-para IE9). Todos los demás navegadores lo admiten sin prefijo.Creo que este es más simple usando clip-path :
fuente
Otra forma de lograr esto, especialmente para alguien que necesita que esto funcione con triángulos equiláteros o incluso escalenos como lo hice yo, es usar
filter: drop-shadow(...)con múltiples valores y sin radio de desenfoque. Esto tiene el beneficio adicional de no necesitar múltiples elementos, o acceso a ambos : antes y: después (estaba tratando de lograr esto con: después de contenido que estaba en línea, así que quería evitar el posicionamiento absoluto también).Para el caso anterior, el CSS de: after podría verse así ( violín ):
Sin embargo, creo que hay algunas limitaciones o rarezas:
<offset-y>valor en la segunda sombra () arriba parece más 1px que 1px, aunque imagino que está relacionado con la trigonometría (aunque al menos en mi monitor no veo diferencia entre los valores reales basados en trigonometría o .5px o incluso .1px para el caso).<spread-radius>) de drop-shadow () podría ser lo que realmente estoy buscando en lugar de múltiples valores de filtro, pero agregarlo simplemente rompió las cosas por completo). Aquí puede ver lo que comienza a suceder cuando va más allá de 1px ( violín ):Observe la gracia de que el primero (verde) se aplica una vez, pero el segundo (rojo) se aplica tanto al triángulo amarillo creado a través del borde como a la sombra verde () y al último (azul) se aplica a todo lo anterior. (Quizás eso también esté relacionado con la apariencia de .5px).
Pero supongo que puede aprovechar estas sombras paralelas que se construyen entre sí si necesita algo más ancho que 1px, cambiándolas a algo como lo siguiente ( violín ):
donde el primero tiene un conjunto de radio de desenfoque (2.5px en este caso, aunque el resultado parece multiplicado), y todos los demás tienen desenfoque en 0. Pero esto solo funcionará para el mismo color en todos los lados, y resulta en algunas esquinas de aspecto redondeado, así como bordes bastante ásperos cuanto más grande vas.
fuente
fuente