Color del borde personalizado del triángulo CSS


114

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/

Respuestas:


185

De hecho, tienes que fingirlo con dos triángulos ...

.container {
    margin: 15px 30px;
    width: 200px;
    background: #fff;
    border: 1px solid #a00;
    position: relative;
    min-height: 200px;
    padding: 20px;
    text-align: center;
    color: #fff;
    font: bold 1.5em/180px Helvetica, sans-serif;
    text-shadow: 0 0 1px #000;
}

.container:after,
.container:before {
    content: '';
    display: block;
    position: absolute;
    left: 100%;
    width: 0;
    height: 0;
    border-style: solid;
}

.container:after {
    top: 10px;
    border-color: transparent transparent transparent #fdd;
    border-width: 10px;
}

.container:before {
    top: 9px;
    border-color: transparent transparent transparent #a00;
    border-width: 11px;
}

Fiddle actualizado aquí

ingrese la descripción de la imagen aquí


1
¡Eso es perfecto! exactamente lo que necesitaba. Gracias.
Ed. R

1
oye, no entiendo cómo modificaría el triángulo para que aparezca en el otro lado de la caja (no entiendo cómo funciona el triángulo css)
Kevin

1
SMRT - ¡Eres tan inteligente!
Code Whisperer

5
Tenga en cuenta, para los que tienen la misma pregunta que @ Kevin. Mire el 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, cambie border-colora transparent #e3f5ff transparent transparent;en ambos, .container:aftery.container:before
rmagnum2002

1
@Scott ¡Gracias por esto! ¡Tu JS Fiddle dio en el clavo! Sin embargo, tenga cuidado con copypasta fuera de JSFiddle, agregó dos caracteres invisibles e inválidos en mi archivo CSS que causaron errores de validación / análisis en ese archivo css. Una vez que eliminé los caracteres invisibles (los caracteres eran de ancho cero, por lo que el cursor no los mostraba, pero pude retroceder) funcionó de maravilla. El problema no era tu código, creo que JS Fiddle introdujo algunos personajes misteriosos en el código mostrado. No sé, pero solo quería mencionarlo por el bien de la posteridad, en caso de que alguien se encuentre con el mismo problema.
hypervisor666

91

Sé que lo acepta, pero verifique este también con menos css:

.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;
    right:-7px;
    width: 10px;
    height: 10px;
    background: #FFFFFF;
    border-right:1px solid #CAD5E0;
    border-bottom:1px solid #CAD5E0;
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
}

http://jsfiddle.net/4ZeCz/3/


oye, no entiendo cómo modificaría el triángulo para que aparezca en el otro lado de la caja (no entiendo cómo funciona el triángulo css)
Kevin

2
@Kevin creo esto, por favor revise jsfiddle.net/4ZeCz/97 . Intenta jugar con las propiedades que tengo uso y si tienes alguna pregunta puedes preguntarme :)
sandeep

3
Una explicación: esto crea un elemento cuadrado normal con bordes en dos lados adyacentes, formando un triángulo inclinado. Luego, el cuadrado se inclina 45 grados, por lo que el triángulo apunta hacia arriba (o hacia donde lo desee). Por cierto, ahora solo necesitas el -webkit-prefijo (y -ms-para IE9). Todos los demás navegadores lo admiten sin prefijo.
rvighne

¡Solución muy inteligente! Gracias.
Solhan

3

Creo que este es más simple usando clip-path :

.container {
  width: 150px;
  min-height: 150px;
  background: #ccc;
  padding: 8px;
  padding-right: 6%;
  display: inline-block;
  clip-path: polygon(0% 0%,0% 100%,90% 100%,90% 5%,100% 10%,90% 15%,90% 0%);
}
<div class="container">
test content
</div>


1

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

.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-style: solid;
  border-width: 20px 0 40px 15px; /* skewed to show support for non-right-angle triangles */
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(1px 0 0 #CAD5E0) drop-shadow(0 .5px 0 #CAD5E0);
}
<div class="container">
  Test Container
</div>

Sin embargo, creo que hay algunas limitaciones o rarezas:

  • No hay soporte en IE11 (aunque parece estar bien en FF, Chrome y Edge)
  • No estoy muy seguro de por qué .5px para el <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).
  • Los bordes de más de 1 px (bueno, su apariencia de esa manera) no parecen funcionar bien. O al menos no he encontrado la solución, aunque vea a continuación una forma menos que óptima de ir un poco más grande. (Creo que el cuarto parámetro documentado pero no compatible ( <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 ):

.container {
  background-color: #eee;
  padding: 1em;
}
.container:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20.4px 10px 0 10px;
  border-color: yellow transparent transparent transparent;
  margin-left: .25em;
  display: inline-block;
  filter: drop-shadow(-6px -4px 0 green) drop-shadow(6px -4px 0 red) drop-shadow(0 6px 0 blue);
}
<div class="container">
  Test Container
</div>

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

filter: drop-shadow(0 0 2.5px red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red);

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.


0
.triangle{
    position: absolute;
    width:0px;
    height:0px;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    border-bottom: 72px solid #DB5248;
}

.triangle:after{
    position: relative;
    content:"!";
    top:8px;
    left:-8px;
    color:#DB5248;
    font-size:40px;
}

.triangle:before{
    content:".";
    color: #DB5248;
    position: relative;
    top:-14px;
    left:-43px;
    border-left: 41px solid transparent;
    border-right: 41px solid transparent;
    border-bottom: 67px solid white;
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.