css - 使用 CSS 创建自定义形状

Question

我正在尝试使用 CSS 创建自定义形状，但我无法完全创建我想要实现的目标。形状将代表主导航上的选定项目，如下所示：

如您所见，我<a class="selected">使用 CSS 属性设置了元素的样式，该属性border-radius: 40px 40px 40px 40px;显示了与药丸外观相似的形状。

然而，我想要实现的是一个具有直的顶部和底部边缘但具有圆形左右两侧的形状，如下图所示：是否有任何 CSS 属性我可以应用来实现这一点？

Answer 1

看看下面的css：

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

这种鲜为人知的斜线表示法使您能够使用椭圆边界半径，正如您在MDN 边界半径文档的图像中看到的那样。

使用斜线表示法，您可以像这样定义垂直和水平边界半径：

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

Answer 2

您可以在 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%;
}