Sınır yarıçapı eğrisi nasıl dışarıda yapılır?Sınır yarıçapı CSS özelliği eğrisi
alt tarafı sınır yarıçap dış eğri istiyoruz. CSS3 ile nasıl yapılır?
Sınır yarıçapı eğrisi nasıl dışarıda yapılır?Sınır yarıçapı CSS özelliği eğrisi
alt tarafı sınır yarıçap dış eğri istiyoruz. CSS3 ile nasıl yapılır?
Evet, bunu ekstra bir işaret olmadan yapabilirsiniz. Böyle yaz:
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>
Kontrol grafik parçaları dışında olduğundan, bu durum ek biçimlendirme olmadan mümkün olmayacaktır bu http://jsfiddle.net/p6sGJ/
"Gerçek" kenarlık yarıçapı özelliğini eklemeyi unuttunuz. Bu çirkinliğin daha fazlasını istemiyoruz: http://remysharp.com/2012/02/09/vendor-prefixes-about-to-go-south/ – peirix
Bu hoş ama sadece destek veren bir örnek vereceğim & mozilla browsers :) – sandeep
Evet, ama sorun şu ki, birileri muhtemelen kodunuzu kopyalayıp kopyalayacaktır ve bu muhtemelen sorunun ilk etapta nasıl başladığıdır. Bu yüzden cevabınız üzerinde hızlı bir düzenleme yaptım, bu iyi bir çözüm, bu arada, bundan mümkün olduğunca kaçınmaya çalışabiliriz. – peirix
kutu modeli. – Paul