DIV与圆角和尖角

Question

我正在做一个DIV，我想使两侧圆角。问题是，我不希望角落圆角，但尖尖。有什么建议么？

Answer 1

like tv screen 

#tv { 
    position: relative; 
    width: 200px; 
    height: 150px; 
    margin: 20px 0; 
    background: red; 
    border-radius: 50%/10%; 
    color: white; 
    text-align: center; 
    text-indent: .1em; 
} 
#tv:before { 
    content: ''; 
    position: absolute; 
    top: 10%; 
    bottom: 10%; 
    right: -5%; 
    left: -5%; 
    background: inherit; 
    border-radius: 5%/50%; 
} 

FIDDLE：http://jsfiddle.net/arjun_chaudhary/LBaNY/

Answer 2

我真的不知道我知道你要问什么，但像这样的东西吗？

您可以通过使用两个div的是这样实现的：

<div class="container"> 
    <div class="inner"> 
     Here's some text 
    </div> 
</div> 

然后你就可以将背景图片只需添加到您的“容器” DIV或CSS玩。以下是我在前面的示例中使用的内容：

<style type="text/css"> 
.container { 
    border-radius: 80px; 
    background-color: #d6d6d9; 
    padding: 10px; 
    width: 200px; 
} 
.inner { 
    background-color: #d6d6d9; 
    padding: 40px; 
    text-align: center; 
} 
</style> 

我强烈建议您上传图片以阐明您的请求。