如何用css制作HTML形状

如何用一个HTML元素制作形状？只要至少在一个浏览器中支持，任何CSS技术都可以使用。如何用css制作HTML形状

形状的例子可以是圆形，三角形，六角形等等。

来源

2012-09-25 parkin

我什至不知道问题是什么，但'边界半径：50％; -moz-border-radius：50％;'可以是其中一个答案... – Mark

第一轮形状，但它的边界半径完成。那么现在即时尝试使三角形... – parkin

我得到了但我认为它只是Firefox浏览器只，但对于所有浏览器你知道如何创建CSS ... – parkin

我已经this fiddle一些纯HTML/CSS形状：
- 使用跨边界
2三角形 - 边框圆角的帮助

免责声明圆：我是从旧的谷歌的启发应用程序/菜单栏。

来源：

HTML

An CSS triangle pointing down: 
<span class="delta_down"></span><br> 
An CSS triangle pointing up: 
<span class="delta_up"></span><br> 
Circle: 
<span class="circle"></span>

CSS

span.delta_down { 
     border-color: #C0C0C0 transparent transparent; 
     border-style: solid dashed dashed; 
     border-width: 5px 5px 0; 
     display: inline-block; 
     font-size: 0; 
     height: 0; 
     line-height: 0; 
     padding-top: 1px; 
     position: relative; 
     top: -1px; 
     width: 0; 
} 

span.delta_up { 
     border-color: transparent transparent #C0C0C0; 
     border-style: dashed dashed solid; 
     border-width: 0 5px 5px; 
     display: inline-block; 
     font-size: 0; 
     height: 0; 
     line-height: 0; 
     padding-top: 1px; 
     position: relative; 
     top: -1px; 
     width: 0; 
} 

span.circle { 
     border-radius: 50%; 
     width: 10px; 
     height: 10px; 
     display: inline-block; 
     background-color: #C0C0C0; 
}

来源

2012-09-25 07:19:02

这对纯HTML和CSS来说是不可能的。但是您可以使用canvas元素并使用JavaScript绘制所有形状。

This basic tutorial可能会帮助你。

来源

2012-09-25 06:54:51 QQping

http://css3shapes.com/有关于如何在CSS中制作大量形状的说明。

但严重的是，在浏览器中绘制图形比使用CSS更好。

上述站点中显示的大多数形状仅适用于现代浏览器，因为它们使用CSS3技术，这些技术在IE8等浏览器中不可用。（所以如果你想在旧版本的IE中做到这一点，答案是忘了它）。

但支持这些形状的相同浏览器也支持其他技术，如SVG，它允许您绘制任何你喜欢的形状，而不受工作在盒子形状周围的限制。

所以简短的回答是肯定的，它可以完成，但SVG会给你更好的结果。

来源

2012-09-25 06:57:20 Spudley

但没有使用图像我可以给所有浏览器支持，包括即低版本？？ – parkin

+1个很好的资源，例如我使用类似的东西为内联网，因为我可以控制使用什么浏览器:) –

@parkin - 不，这是我的观点：大多数CSS形状显示需要像'border-radius'或'：before'和'：after'，这些在旧版浏览器中不可用。他们在IE7中加载该页面，并查看其中有多少页面正确显示。很少，我敢打赌。 – Spudley

如何用css制作HTML形状

回答

相关问题