Reunión Border CSS punto

Estoy esperando que alguien me puede ayudar con un problema css ...Reunión Border CSS punto

estoy usando una vista de lista para mostrar algunos resultados, no es necesario que sea un concepto de agrupación, para lograr esto soy usando 2 colores de fondo alternando entre grupos. Estoy tratando de agregar un borde a estos elementos, pero como el borde superior y el borde izquierdo pueden ser de diferentes colores, ¿hay alguna forma de eliminar el triángulo donde se encuentran?

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
p 
{ 
border-top:10px solid red; 
border-left:10px solid white; 
border-bottom-style:dotted; 
border-left-style:solid; 
} 
</style> 
</head> 

<body> 
<p>2 different border styles.</p> 
</body> 
</html>

Fuente

2012-06-26 Ketchup

¿nos puede mostrar un ejemplo de lo que quiere decir con esto? – jaypeagi

las esquinas se encuentran en ángulo, si el borde izquierdo es rojo, y el borde superior es blanco, me queda una flecha roja desde donde el borde rojo se encuentra con el borde blanco – Ketchup

Usted puede escribir así:

p{ 
    width:200px; 
    height:200px; 
    background:red; 
    border-left:5px solid pink; 
    -moz-box-shadow:inset 0 5px green; 
    box-shadow:inset 0 5px green; 
}

Marque esta http://jsfiddle.net/nRWux/1/

caja shaow no funciona en IE8 & a continuación.

Fuente

2012-06-26 11:46:23 sandeep

Gracias, funciona perfectamente :) – Ketchup

Esto es genial, pero todavía hay una pequeña cantidad de sombra que se cruza en el borde en la parte inferior, ligeramente transparente. No es un problema en la mayoría de los casos, pero si necesita tener un píxel perfecto, una solución diferente probablemente sea mejor. – basicallydan

No, no es posible quitar el triángulo donde se encuentran. las fronteras se implementan de esa manera y no hay forma de evitarlo.

Fuente

2012-06-26 11:44:34

Se puede utilizar una caja de sombra para el border-top,

En su ejemplo: http://jsfiddle.net/C7jnJ/

margin-top:10px; 
box-shadow:0 -10px 0 10px red;

En lugar de border-top. se añade el margen superior porque la sombra está mostrando fuera de la 'p', si le gustaría que en el interior, entonces sería: http://jsfiddle.net/C7jnJ/1/

box-shadow:inset 0px 10px 0px red;

Fuente

2012-06-26 11:57:27 Alvaro

Esto también funciona, pero utilicé @sandeeps solución – Ketchup

Aquí es una solución compatible con IE8 + usando: antes pseudo:

violín http://jsfiddle.net/PhilippeVay/hXrW5/

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
p { 
    position: relative; 
    border-top:10px solid red; 
    border-bottom-style:dotted; 
    border-left-style:none; 
} 
p:before { 
    content: ''; 
    display: block; 
    width: 10px; 
    position: absolute; 
    top: -10px; /* top: 0; if you want red over blue (top over left) */ 
    bottom: 0; 
    background: blue; 
} 
</style> 
</head> 

<body> 
<p>2 different border styles.</p> 
</body> 
</html>

Fuente

2012-06-26 11:59:41 FelipeAls

Gran solución @FelipeAls! Gracias ;) – Dan

Respuesta

Cuestiones relacionadas