使用CSS形状进行有趣的用户控件和导航

利用CSS Shapes打造别具一格的用户控件和导航

水平或垂直排列，这是屏幕上用户控件的传统顺序，就像菜单项列表一样。但如果我们将其更改为更流畅的布局，包含弯曲、曲线和凹槽呢？只需几行代码即可实现。在现代极简主义设计的时代，用户控件的曲线布局为网页设计增添了恰到好处的活力。

多亏了CSS Shapes，编码变得异常简单。

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

此标准的用例通常被展示为文本、编辑内容的设计——纯文本沿着其侧面的浮动形状流动。但是，在这篇文章中，我们使用用户控件代替纯文本，看看这些形状如何为它们的布局注入流畅的轮廓。

第一个演示是一个可以在产品页面中使用的设计，其中任何与产品相关的操作控件都可以沿着产品本身的形状对齐。

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174252343279003.png" class="lazy" alt="Using CSS Shapes for Interesting User Controls and Navigation ">
<div>
  <label for="one">One Bottle</label>
</div>
<div>
  <label for="six">Six Pack</label>
</div>
<div>
  <label for="twelve">Twelve Pack</label>
</div>
<div>
  <label for="crate">Entire Crate</label>
</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 https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b231714;
  border-radius: 50%;
  background: linear-gradient(45deg, pink, beige);
  cursor: pointer;
}

瓶子的图像向左浮动，并使用shape-outside属性赋予形状边界。图像本身被用作形状的参考。

注意：只有具有透明背景的图像才能根据图像的轮廓生成形状。

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

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

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

使用shape-outside很容易实现：

<div>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174252343318871.png" class="lazy" alt="Using CSS Shapes for Interesting User Controls and Navigation ">
  <div>
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Formation</a><br><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Atmosphere</a><br><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Heat</a><br><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Gravitation</a>
  </div>
</div>
<div class="right">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174252343318871.png" class="lazy" alt="Using CSS Shapes for Interesting User Controls and Navigation ">
  <div>
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Moon</a><br><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Climate</a><br><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Rotation</a><br><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Orbit</a>
  </div>
</div>

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

main > div { grid-area: 1/1; } 

.right { transform: rotatey(180deg) translatex(250px); }

.right > a { 
  display: inline-block; 
  transform: rotateY(180deg) translateX(-40px); 
}

main > div:nth-of-type(2) img { visibility: hidden; }

元素只能向左或向右浮动。没有中心浮动元素，内容围绕两侧环绕。为了实现链接环绕图像两侧的设计，我创建了两组链接并将其中一组水平翻转。我在两组中都使用了具有circle() CSS 形状值的相同图像，因此即使在旋转后形状也能匹配。翻转组的链接文本将以颠倒的侧向显示，因此它被旋转回来。

尽管两个图像可以彼此叠加而没有可见的溢出，最好使用opacity或visibility属性隐藏其中一个。

第三个示例由于使用了动态HTML元素<details></details>而显得有点生动。此演示是显示有关产品等额外信息的设计的一个很好的示例，这些信息默认情况下对用户隐藏。

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174252343437928.png" class="lazy" alt="Using CSS Shapes for Interesting User Controls and Navigation ">
<details>
  <summary>Click to know more!</summary>
  <ul>
    <li>The diamond is now known as the Sancy</li>
    <li>It comprises two back-to-back crowns</li>
    <li>It's likely of Indian origin</li>
  </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></summary>元素时，父<details></details>元素会显示其内容，这些内容会自动沿着浮动钻石图像的形状环绕。

<details></details>元素的内容不一定要像演示中那样是列表。任何内联内容都将沿着浮动图像的形状环绕。

最后一个示例使用多边形形状而不是图像或简单的形状（如圆形和椭圆形）。通过在形状中添加另一个坐标，可以轻松弯曲多边形，从而获得更多有角度的几何形状。

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174252343443133.png" class="lazy" alt="Using CSS Shapes for Interesting User Controls and Navigation ">
<div>
  <ul>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Shop</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Media</a></li>
  </ul>
</div>

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

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

如您所见，即使对于用户控件的简单对角线布局，CSS Shapes也能很好地为设计增添一些活力。使用CSS Shapes比旋转一行用户控件要好得多——各个控件和文本的对齐方式也会旋转，从而导致布局异常。相比之下，CSS Shape 只需沿着提供的形状边界布置各个控件。

请注意，以上代码示例中图片路径需要替换成实际的图片路径。 我已尽力保留原文大意，并对部分语句进行了同义词替换和句式调整，以达到伪原创效果。

以上是使用CSS形状进行有趣的用户控件和导航的详细内容。更多信息请关注PHP中文网其他相关文章！