如何使用邊框半徑來製作這種形狀？

Question

我到目前爲止做出在這裏http://jsfiddle.net/cmRHp/1/

<div class="tv">13.3"</div> 

和我要讓正是這樣

Answer 1

這些都不是實際的圓角邊框，所以你可能需要使用2元素。

.tv { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 150px; 
 
    margin: 50px auto 0; 
 
    background: black; 
 
    color: white; 
 
    font: bold 300%/3.6 sans-serif; 
 
    text-align: center; 
 
    border-bottom-right-radius: 15px 70px; 
 
    border-top-right-radius: 15px 70px; 
 
    border-top-left-radius: 15px 70px; 
 
    border-bottom-left-radius: 15px 70px; 
 
} 
 
.tv-inner { 
 
    background: black; 
 
    height: 180px; 
 
    margin: 0 15px; 
 
    position: relative; 
 
    top: -15px; 
 
    border-bottom-right-radius: 70px 15px; 
 
    border-top-right-radius: 70px 15px; 
 
    border-top-left-radius: 70px 15px; 
 
    border-bottom-left-radius: 70px 15px; 
 
}

<div class="tv"> 
 
    <div class="tv-inner">13.3"</div> 
 
</div>

http://jsfiddle.net/cmRHp/6/