使用CSS创建自定义形状
我正在尝试使用CSS创建自定义形状,但是我无法完全创建我想要实现的形状。形状将代表其在此处显示在主导航选择的项目:使用CSS创建自定义形状
正如你可以看到我已经风格元素<a class="selected">
与显示具有相似的外观,药丸形状的CSS属性border-radius: 40px 40px 40px 40px;
。
但是我想要实现的是一个形状,有直的顶部和底部的边缘,但有左右两边圆形如下图所示:是否有任何CSS属性我可以申请实现这一目标?
看看下面的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>
css的圣母... +1 – 2013-04-11 13:32:38
+1#bada55! – thgaskell 2013-04-11 13:34:04
我可以问第二个值的斜线符号是什么定义? 我知道第一个值是定义圆的半径,但是什么是/和100%在做什么? – user1554264 2013-04-11 13:51:05
可以在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%;
}
我的回答中没有看到链接。 – 2013-04-11 13:19:31
我可以请你加入你提到的链接吗? – user1554264 2013-04-11 13:19:35
添加了我粘贴在我脑海中的链接。 – Schleis 2013-04-11 13:26:12
如果您想设法使这个在CSS中,我会向你们致敬。不过,我认为它需要CSS3,所以IE8和更低版本会对此产生不满。我只会使用图像。 – 2013-04-11 13:16:39
看起来像一个圆形,并且包含div的溢出设置为隐藏。 – thgaskell 2013-04-11 13:17:29