Yuvarlak başlık CSS

Question

içinde altını? Nasıl?

border-bottom ile bunu yapmanın bir yolu var mı? border-radius yerine bu şık etki üretir:

Answer 1

DÜZENLEME: hpique wated Ne missunderstood, ancak bu çalışması gerekir:

HTML:

<div id="test">Hello world</div> 

CSS:

#test { 
    font-size: 50px; 
    background: transparent; 
    border-radius: 10px; 
    height: 10px; 
    width: 255px; 
    box-shadow: 0 55px 0 0 #000; 
    font-family: sans-serif; 
} 

Temelde ben bir div metin atıyorum, ve kutu gölgesi, height ve width setiyle aynı boyutta olacak, sadece height/ile oynayacaktır. Demo 10 ve istediğini elde etmelidir ...

JSBin Demo

Ekran Görüntüsü:

Answer 2

sayılı size tamamen HTML + sen metninin altında oturmak için ikincil bir unsuru gerekir CSS ile bunu ve sonra buna eğriliği ve arka plan rengini uygulamak isterseniz . Alternatif olarak, ve bence-layık, bence, sen bir görüntü kullanabilirsiniz.

Answer 3

Evet, bu mümkün. içeriksiz :after kullanarak bir blok elemanı ekleyin ve böylece gibi o arzu genişlik/yükseklik vermek: Burada

h1:after { 
    content:""; 
    float:left; 
    background:green; 
    width:100%; 
    height:6px; 
    border-radius: 3px; 
} 

Fiddle: youtag cevabı gibi https://jsfiddle.net/toqL0agq/1/

Answer 4

, benim çözüm sözde elemanları ama kullanan benim altı çizili sadece çalışır metnin uzunluğu ve birden çok satıra (her satırın altında çalışan bir alt çizgi ile) sarılabilir.

Temelde, el eleman önce ve sonra sözde eleman çevrelerle öğenin sınırına uçları kapağı: biter sadık kalmaz

h1 a { 
    text-decoration: none; 
    position: relative; 
    border-bottom: 15px solid; 
    padding-bottom:3px; 
} 

    h1 a:hover, h1 a:focus { 
    border-bottom: 15px solid #eb6d32; 
} 

h1 a:before, h1 a:after { 
    content: ''; 
    height: 15px; 
    width: 15px; 
    background-color: currentColor; 
    border-radius: 15px; 
    position: relative; 
    display: inline-block; 
    vertical-align: text-bottom; 
    margin-bottom: -18px; 
} 

h1 a:before { 
    left: .2ex; 
    margin-left: -.4ex; 
} 

h1 a:after { 
    margin-right: -.4ex; 
    right: .2ex; 
} 

Ben sözde elemanları üzerinde left ve right kullanmak metni çok geçmeden.

Bkz. codepen.

Answer 5

Bunu, metnin altındaki bir div kullanarak ve sınır yarıçapını 2000 piksele ayarlayarak yapabilirsiniz.Ben o basit

HTML olacağını düşünüyorum:

<div class="wrapper"> 
    <span>Hell World</span> 
    <div class="underline"></div> 
</div> 

CSS:

.underline{ 
    height:0px;border: 3px solid black; 
    border-radius: 2000px; 
} 
.wrapper{ 
    display:inline-block; 
} 

JQUERY SNIPPET:

İkinci örnek istemiyorum ne

var arbitrarynumber = 5 
$('.underline').width($('.underline').parent().width()-arbitrarynumber)