我有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