Come rendere la curva del raggio di confine all'esterno?Curva di proprietà CSS limite-raggio esterna
Il lato inferiore del raggio confine vogliono curva esterna. Come farlo con CSS3?
Come rendere la curva del raggio di confine all'esterno?Curva di proprietà CSS limite-raggio esterna
Il lato inferiore del raggio confine vogliono curva esterna. Come farlo con CSS3?
Sì, è possibile farlo senza alcun segno di spunta aggiuntivo. Scrivere in questo modo:
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>
Scegli questa http://jsfiddle.net/p6sGJ/
Hai dimenticato di aggiungere la proprietà "reale" 'border-radius'. Non vogliamo più di questa pazzia: http://remysharp.com/2012/02/09/vendor-prefixes-about-to-go-south/ – peirix
Questo è bello, ma mi limito a dare un esempio di supporto -webkit & mozilla browsers :) – sandeep
Sì, ma il problema è che probabilmente qualcuno sta per copiare semplicemente incollare il codice, e questo è probabilmente il modo in cui il problema è iniziato in primo luogo. Quindi ho appena fatto una modifica rapida alla tua risposta, che è una buona soluzione, comunque, così possiamo cercare di evitarlo il più possibile. – peirix
Ciò non sarà possibile senza marcatura aggiuntiva in quanto parti della grafica sono al di fuori il modello di scatola. – Paul