Color de borde personalizado del triángulo CSS

Intento utilizar un color hexadecimal personalizado para mi triángulo CSS (borde). Sin embargo, dado que utiliza propiedades de borde, no estoy seguro de cómo hacerlo. Me gustaría mantenerme alejado de javascript y css3 simplemente por compatibilidad. Estoy intentando 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/

Feb 26 '12 12:02 Ed R

Sé que aceptas eso, pero revisa 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/

Feb 26 '2012 05:02 sandeep

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>

May 16 '2018 17:05 lalengua

Otra forma de lograr esto, especialmente para alguien que necesita esto para trabajar con triángulos equiláteros o incluso escalenos como lo hice yo, es usarlo filter: drop-shadow(...)con valores múltiples y sin radio de desenfoque. Esto tiene el beneficio adicional de no necesitar múltiples elementos o acceso a :before y :after (estaba tratando de lograr esto con :after contenido que estaba en línea, por lo que también quería evitar el posicionamiento absoluto).

Para el caso anterior, el CSS de :after podría verse así ( fiddle ):

.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 existen 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 paralela () anterior se parece más a 1px que a 1px, aunque imagino que está relacionado con la trigonometría (aunque al menos en mi monitor no veo ninguna diferencia entre los valores reales basados ​​en trigonometría o .5px o incluso .1px).
• Los bordes mayores 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 no óptima de crecer un poco más. (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í puedes ver lo que comienza a suceder cuando se 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 lo divertido que es 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 puedes aprovechar estas sombras paralelas si necesitas algo con un aspecto más amplio que 1 px, cambiándolas a algo como lo siguiente ( fiddle ):

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 radio de desenfoque establecido (2.5px en este caso, aunque el resultado aparece 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 seas.

Jul 18 '2018 23:07 Max Starkenburg