html - 三 Angular 形网页设计的最佳实践?

标签 html css

<分区>


想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它.

关闭 8 年前

我正在寻找创建三 Angular 形网页设计的最佳方法,如下所示:

Template layout of triangles

在这种情况下,三 Angular 形内的文本必须换行,三 Angular 形将缩进文本,并且这些三 Angular 形可以有背景..

使用 CSS(边框技巧)制作三 Angular 形似乎可行,但在尝试为其设置背景时失败。

使用图像(例如 svg)作为 div 的背景,并将内部段落的宽度指定为三 Angular 形(example),会对浏览器兼容性产生不良影响,并且在响应能力方面非常糟糕。

使用一些 css3 并创建倾斜的 div 似乎是一个不错的选择(example),但它可能是一个有点沉重的选择并且并非在所有浏览器中都支持(仍然是所有新浏览器)

transform-origin: 100% 0;
transform: skewX(-55.98deg);

最佳答案

您正在寻找这样的东西:http://webplatform.adobe.com/shapes/ .但我相信它仍处于实验阶段,您不会找到对 IE10 及更低版本的支持。

关于html - 三 Angular 形网页设计的最佳实践?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26553976/

上一篇:javascript - twitter bootstrap btn-group 来驱动标签内容

下一篇:html - 如何确保 DIV 中的图像随浏览器调整大小而调整大小

相关文章:

html - radio 输入间距异常

django - 将 HTML5 appCache 与 Django 动态页面一起使用

javascript - 此音频播放器在某些浏览器中存在不兼容问题

css - 文本不在 flex IE10 中换行

javascript - 新滚动器 - 使用 javascript 替换 div 后不滚动

html - 为什么我的 html 页面在独立后无法呈现相同的页面?

javascript - 在 jquery 中调整视口(viewport)大小时禁用和启用滚动窗口

html - Div背景图片不显示

java - 将 HTML 符号转换为 Java 符号

javascript - 如何在 $ ('body' .append 脚本中添加这些 HTML 标签?