使用CSS形状进行有趣的用户控制和导航的教程

直线穿过或向下，这是屏幕上用户控制的谚语顺序。就像一个菜单项的列表。但是，如果我们把它改成一个带有弯曲、曲线和角落的更_流畅的_布局呢？我们只需要几行代码就能完成。在现代简约设计的时代，用户控件的弧形布局为网页设计增添了恰到好处的活力。

由于有了CSS形状，对它们进行编码是再容易不过了。

CSS形状（特别是 shape-outside 属性）是一个标准，它为浮动元素分配了几何形状。然后，内容沿着这些形状的边界环绕浮动元素。

这个标准的使用案例通常被展示为文本、编辑内容的设计--其中纯文本沿着浮动在其两侧的形状流动。然而，在这篇文章中，为了取代纯文本，我们使用用户控制，看看这些形状如何在其布局中注入一些流动的轮廓。

对于第一个演示，这里有一个可以用于产品页面的设计，任何与产品相关的动作控制都可以沿着产品本身的形状排列。

<img src="bottle.png">
<div>
  <input type="radio" name=blue checked> <br>
  <input type="radio" name=blue> <br>
  <input type="radio" name=blue> <br>
  <input type="radio" name=blue>
</div>

img {
  height: 600px;
  float: left;
  shape-outside: url("bottle.png");
  filter: brightness(1.5);
}
input {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  margin-left: 20px;
  box-sizing: content-box;
  border: 10px solid #231714;
  border-radius: 50%;
  background: linear-gradient(45deg, pink, beige);
  cursor: pointer;
}

瓶子的图像被向左浮动，并使用shape-outside 属性给出一个形状边界。图像本身被引用到形状中。

注意：只有透明背景的图像才能根据图像的剪影产生形状。

单选按钮的默认样式被替换成一个自定义的样式。一旦浏览器将形状应用于浮动的图像，单选按钮就会自动沿着瓶子的形状对齐。

像这样，我们不需要为每个单选按钮单独分配位置来创建这样的设计。以后添加的任何按钮都会根据瓶子的形状，自动与前面的按钮对齐。

下面是另一个例子，灵感来自于维基百科的主页。这是我们正在看的那种非常规主菜单布局的一个完美例子。

用shape-outside ，这并不是太疯狂的做法。

<div>
  <img src="earth.png">
  <div class=l>
    <a href="#">Formation</a><br>
    <a href="#">Atmosphere</a><br>
    <a href="#">Heat</a><br>
    <a href="#">Gravitation</a>
  </div>
</div>
<div>
  <img src="earth.png">
  <div class=r>
    <a href="#">Moon</a><br>
    <a href="#">Climate</a><br>
    <a href="#">Rotation</a><br>
    <a href="#">Orbit</a>
  </div>
</div>

img {
  height: 250px;
  float: left;
  shape-outside: circle(40%);
}

/* stack both sets of menus on the same grid cell */
main > div { grid-area: 1/1; } 

/* one set of menus is flipped and moved sideways over the other */
.r { transform: rotatey(180deg) translatex(250px); }

/* links inside the flipped set of menus are rotated back */
.r > a { 
  display: inline-block; 
  transform: rotateY(180deg) translateX(-40px); 
}

/* hide one of the images */
main > div:nth-of-type(2) img { visibility: hidden; }

一个元素只能向左或向右浮动。没有中间浮动的元素，内容包裹在两边。为了实现链接在图片两边环绕的设计，我做了两组链接，并将其中一组水平翻转。我在两组中都使用了相同的图片，其CSS形状值为circle() ，所以即使在旋转后，形状也是一致的。被翻转的那组链接的文字会出现颠倒的侧面，所以它被旋转回来。

尽管两张图片都可以放在彼此的上面而没有可见的溢出，但最好用不透明度或可见性属性隐藏其中的一张。

第三个例子由于使用了动态HTML元素之一，即<details> ，显得有些活泼。这个演示是一个很好的设计例子，可以显示产品等的额外信息，这些信息在默认情况下对用户是隐藏的。

<img src="diamond.png">
<details>
  <summary>Click to know more!</summary>
  <ul>
    <li>The diamond is now known as the Sancy
    <li>It comprises two back-to-back crowns
    <li>It's likely of Indian origin
  </ul>
</details>

img {
  height: 200px;
  float: left;
  shape-outside: url("diamond.png");
  shape-margin: 20px;
}
summary {
  background: red;
  color: white;
  cursor: pointer;
  font-weight: bold;
  width: 80%; 
  height: 30px;
  line-height: 30px;
}

图片被向左浮动，并被赋予一个与图片相同的CSS形状。shape-margin 属性在分配给浮动元素的形状周围增加了边缘空间。当<summary> 元素被点击时，父级<details> 元素显示其内容，自动沿着浮动的钻石图像的形状包裹。

<details> 元素的内容不一定是一个列表，就像演示中那样。任何内联内容都会沿着浮动图像的形状包裹起来。

最后一个例子是用一个多边形的形状，而不是图像或简单的形状，如圆和椭圆。多边形给了我们更多角度的几何形状，只需在形状中添加另一个坐标，就可以很容易地进行弯曲。

<img src="nasa.png">
<div><!-- triangle --></div>
<ul>
  <li><a href="#">Home</a>
  <li><a href="#">Projects</a>
  <li><a href="#">Shop</a>
  <li><a href="#">Contact</a>
  <li><a href="#">Media</a>
</ul>

div {
  width: 0;
  height: 0;
  --d:  200px;
  /* red triangle */
  border-right: var(--d) solid transparent;
  border-bottom: var(--d) solid transparent;
  border-left: var(--d) solid red;
  float: left;
  /* triangle CSS shape */
  shape-outside: polygon(0 0, var(--d) 0, 0 var(--d));
}
ul {
  list-style: none;
  padding-top: 25px;
}

一个左浮动的红色三角形是用边框属性创建的。为了创建一个符合红色三角形的CSS形状，我们要使用多边形函数作为shape-outside 属性的值。polygon() 函数的值是三角形的三个坐标，用逗号分隔。链接会自动围绕浮动的三角形对齐，形成一个倾斜的菜单布局，沿着三角形的斜边。

正如你所看到的，即使是简单的用户控件的对角线布局，CSS形状也能很好地为设计增加一点活力。使用CSS形状比旋转一行用户控件要好得多--单个控件和文本的排列也会旋转，从而造成布局的怪异。相比之下，CSS形状只是将各个控件沿着所提供的形状的边界排列起来。