html - 你怎么能用css在html中制作一个形状

Question

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

形状的示例是圆形、三角形、六角形等。

Answer 1

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

但说真的，在浏览器中绘制形状有比使用 CSS 更好的解决方案。

上面站点中显示的大多数形状仅适用于现代浏览器，因为它们使用了在 IE8 等浏览器中不可用的 CSS3 技术。（因此，如果您想在旧版本的 IE 中执行此操作，答案就是忘记它）。

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

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

Answer 2

我用一些纯 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;
}

Answer 3

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

本基础教程可能会对您有所帮助。