使用CSS创建自定义形状

Question

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

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

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

Answer 1

看看下面的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

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%;
}