¿Cómo hacer que la curva de radio de borde quede afuera?Curva de propiedad de CSS de radio de borde exterior
El lado inferior del radio frontera quieren curva exterior. ¿Cómo hacerlo con CSS3?
¿Cómo hacer que la curva de radio de borde quede afuera?Curva de propiedad de CSS de radio de borde exterior
El lado inferior del radio frontera quieren curva exterior. ¿Cómo hacerlo con CSS3?
Sí, puede hacerlo sin ningún margen adicional. Escribe así:
CSS
.active{
border:1px solid red;
border-bottom:0;
width:80px;
height:40px;
margin:30px;
position:relative;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.active:after,
.active:before{
content:'';
width:40px;
height:30px;
border:1px solid red;
position:absolute;
bottom:-3px;
border-top:0;
}
.active:after{
border-left:0;
-moz-border-radius:0 0 5px 0;
-webkit-border-radius:0 0 5px 0;
border-radius: 0 0 5px 0;
left:-41px;
}
.active:before{
border-right:0;
-moz-border-radius:0 0 0 5px;
-webkit-border-radius:0 0 0 5px;
border-radius: 0 0 0 5px;
right:-41px;
}
HTML
<div class="active">hi</div>
Marque esta http://jsfiddle.net/p6sGJ/
Olvidó agregar la propiedad 'real '' border-radius'. No queremos más de esta locura: http://remysharp.com/2012/02/09/vendor-prefixes-about-to-go-south/ – peirix
Eso es bueno, pero solo doy un ejemplo que soporta -webkit & mozilla browsers :) – sandeep
Sí, pero el problema es que probablemente alguien copie y pegue el código, y así es como comenzó el problema en primer lugar. Así que acabo de hacer una edición rápida de tu respuesta, que es una buena solución, por cierto, así que podemos tratar de evitar esto tanto como sea posible. – peirix
Esto no será posible sin el marcado adicional, ya que las partes de la gráfica están fuera el modelo de caja. – Paul