Jak utworzyć krzywą granicy na zewnątrz?Krzywa właściwości CSS o promieniu brzegu poza kodem
dolny bok promień krzywej granicznej chcą zewnątrz. Jak to zrobić z CSS3?
Jak utworzyć krzywą granicy na zewnątrz?Krzywa właściwości CSS o promieniu brzegu poza kodem
dolny bok promień krzywej granicznej chcą zewnątrz. Jak to zrobić z CSS3?
Tak, możesz to zrobić bez dodatkowej marży. Napisz tak:
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>
Sprawdź to http://jsfiddle.net/p6sGJ/
Zapomniałeś dodać "prawdziwą" właściwość 'border-radius'. Nie chcemy już więcej tego szaleństwa: http://remysharp.com/2012/02/09/vendor-prefixes-about-to-go-south/ – peirix
To miło, ale po prostu podam przykład wsparcia -webkit i przeglądarki Mozilli :) – sandeep
Tak, ale problem polega na tym, że ktoś prawdopodobnie po prostu skopiuje wklej swój kod, i prawdopodobnie to właśnie początek problemu. Po prostu dokonałem szybkiej edycji twojej odpowiedzi, co jest dobrym rozwiązaniem, przy okazji, więc możemy spróbować tego uniknąć tak bardzo, jak to tylko możliwe. – peirix
Nie będzie to możliwe bez dodatkowych znaczników od części graficznej są poza model pudełkowy. – Paul