我有2个基本的想法如何执行我的设计，我的问题是哪个更好，然后在CSS中摆弄动画等等给我更多自由。

在此处输入图片说明

那将是一个导航菜单，将鼠标悬停在其中一个菜单上将使其更大。

2个想法：

  1. CSS剪切路径：多边形工具。 这件事的问题是IE和较旧的Firefox支持

  2. 只需在Illustrator中创建此“难题”部分即可。 可能很难在CSS中摆弄这个东西。 每一块都必须使用不同的颜色，所以我必须创建很多图像。

PS。 在执行类似的事情时，我将不胜感激其他提示/提示

===============>>#1 票数：1

一个好的方法是为此使用SVG 。 您只能在Illustrator中创建一个，然后通过CSS更改其大小，颜色和其他。

我建议使用内联SVG （而不是像导入常规图像一样导入），因为它为您提供了对各个组件的大量控制-以便可以轻松制作动画。

浏览器支持非常好 。

这是入门SVG的好指南： https : //css-tricks.com/using-svg/

===============>>#2 票数：0 已采纳

我建议使用CSS转换 。 您可以将before伪元素和after伪元素与偏斜变换配合使用以实现此形状，而无需剪切路径，图像或矢量图形。

工作示例： 

 ul, li { margin: 0; padding: 0; list-style: none; } ul { margin: 50px; } li a { display: block; width: 75px; height: 125px; line-height: 100px; text-align: center; position: relative; margin-bottom: 10px; color: white; text-decoration: none; } li a:before, li a:after { content: ''; display: block; width: 50%; height: 100%; background: grey; position: absolute; top: 0; z-index: -1; border: 1px solid black; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } li a:before { left: 0; border-right: 0; -webkit-transform: skewY(-45deg); -moz-transform: skewY(-45deg); -ms-transform: skewY(-45deg); -o-transform: skewY(-45deg); transform: skewY(-45deg); } li a:after { right: 0; border-left: 0; -webkit-transform: skewY(45deg); -moz-transform: skewY(45deg); -ms-transform: skewY(45deg); -o-transform: skewY(45deg); transform: skewY(45deg); } 
 <ul> <li> <a href="#">text1</a> </li> <li> <a href="#">text2</a> </li> <li> <a href="#">text3</a> </li> </ul>

  ask by Higeath translate from so

未解决问题？本站智能推荐：

2回复

使用CSS设计多边形形状

我想使用CSS设计以下形状。 我不想为此使用svg或canvas。 我该如何设计。 任何帮助将不胜感激。
1回复

如何设计css框如下图所示

这个问题已经在这里有了答案 ： 3年前关闭。 带有箭头的气泡 （3个答案） 有可能使用CSS如下图所示吗？ 我不知道从哪里开始。 它是通过边界半径属
3回复

CSS设计 - 彩虹

我想仅使用CSS创建彩虹。 以下是所需内容的图像。 这是我的代码（到目前为止）： * { margin: 0; padding: 0; } #r { height: 80vw; width: 80vw; background-color: #f00; position:
2回复

如何在CSS中制作边框半径？

如何使边界半径朝内？ 我知道-50px是不可接受的，但我只是给出一个理论示例。 请参见下图作为参考。
5回复

如何在css中执行以下提到的形状

我需要一个形状怪异的div，并且我已经在网上阅读了有关div形状的信息，但是我没有找到我需要的： 请注意：它不能只是边框，因为里面应该有文字。
1回复

如何在CSS中获得不同类型的三角形？

目前我正在使用border-bottom，border-top，border-left，border-right来处理不同类型的三角形。 到目前为止，我的背景颜色正常。 但我需要通过放置背景图像（不切割任何背景图像）来获得这种形状。 我试图通过使用边框但没有运气来做到这一点。 这
3回复

在我的示例中，六边形内的图像

如何将hexagon的类hexagon图像放入..我想更改标签图像> ..上的background-image 我的示例： http : //codepen.io/anon/pen/ZBzYqp
2回复

在CSS中制作圆角的底角[关闭]

我正在尝试使用带有border-radius圆底角制作CSS形状，但无法理解如何： .rounded-css { border-radius: 5px; display: block; background: #669999; width: 150px; height: 200p
2回复

如何在CSS中倾斜虚线边框？

我正在尝试使用CSS为邮件应用程序设计信封。 我的客户希望以这种方式填充虚线边框 如何使用CSS边框实现该效果？
1回复

如何使用CSS HTML在此形状中绘制这样的2行

我想用HTML和CSS绘制这个形状： 我的问题是如何在绿色矩形的左侧和右侧绘制2条线。 这是我的尝试： .c{ width: 225px; float: left; padding: 13px; margin: 5px; border-width:2px; bord