2013-04-11 140 views
1

我正在尝试使用CSS创建自定义形状,但是我无法完全创建我想要实现的形状。形状将代表其在此处显示在主导航选择的项目:使用CSS创建自定义形状

正如你可以看到我已经风格元素<a class="selected">与显示具有相似的外观,药丸形状的CSS属性border-radius: 40px 40px 40px 40px;

但是我想要实现的是一个形状,有直的顶部和底部的边缘,但有左右两边圆形如下图所示:是否有任何CSS属性我可以申请实现这一目标?

enter image description here

+0

如果您想设法使这个在CSS中,我会向你们致敬。不过,我认为它需要CSS3,所以IE8和更低版本会对此产生不满。我只会使用图像。 – 2013-04-11 13:16:39

+1

看起来像一个圆形,并且包含div的溢出设置为隐藏。 – thgaskell 2013-04-11 13:17:29

回答

11

看看下面的CSS:

div{ 
    border-radius: 10px/100%; 
} 

这个鲜为人知的斜杠符号使您可以使用椭圆形边框半径为你可以在MDN border-radius Doc的图像中看到。

随着斜杠记号可以定义垂直和水平边界半径是这样的:

border-radius: [up to 4 horizontal values]/[up to four vertical values]; 

这意味着可以单独地限定具有不同半径的椭圆为每个角(以下定义的多个值的一般规则):

/*   horizontal values | vertical values */ 
    /*    ↓ top-left  | ↓ top-left  */ 
    border-radius: 5px 6px 7px 8px/10px 11px 12px 13px; 
    /*    bottom-right ↑ | bottom-right ↑ */ 

如果您足够强烈地扭曲椭圆,您可以达到您的情况所需的效果。

div{ 
 
    background:#bada55; 
 
    color:white; 
 
    font-size:30px; 
 
    font-family:arial, sans-serif; 
 
    padding:10px 20px; 
 
    display:inline-block; 
 
    margin:10px; 
 
    border-radius: 10px/90%; 
 
    text-shadow:1px 1px 1px #792; 
 
    box-shadow:inset 1px 1px 1px rgba(70,90,10,.3); 
 
}
<div>sponsorship</div>

JSFiddle

+4

css的圣母... +1 – 2013-04-11 13:32:38

+2

+1#bada55! – thgaskell 2013-04-11 13:34:04

+0

我可以问第二个值的斜线符号是什么定义? 我知道第一个值是定义圆的半径,但是什么是/和100%在做什么? – user1554264 2013-04-11 13:51:05

1

可以在CSS3做到这一点。此链接包含各种形状,您可以使用http://css-tricks.com/examples/ShapesOfCSS/。我认为你会想使用类似“电视屏幕”的东西

#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%; 
} 
+0

我的回答中没有看到链接。 – 2013-04-11 13:19:31

+0

我可以请你加入你提到的链接吗? – user1554264 2013-04-11 13:19:35

+0

添加了我粘贴在我脑海中的链接。 – Schleis 2013-04-11 13:26:12