2012-05-11 29 views

cevap

5

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/

+0

"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

+0

Bu hoş ama sadece destek veren bir örnek vereceğim & mozilla browsers :) – sandeep

+1

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

İlgili konular