Question

如何使用css获得这样的布局？

 _ _ _ _ _ _ _ _ _ _  _ _
|                        \
|   People                \     link1           link2
|                          \
|_ _ _ _ _ _ _ _  _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _  _ _ _
|                                                               |
|                content                                        |
|                                                               |
|_ _ _ __ _ __ _ _ _ _ _ _ _  __ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _|

Answer 1

这里唯一的挑战是人。你可以把它放在一个名为“people_slanted”的类中，或类似的东西：

border-bottom: 100px solid red;
border-left: 0 solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 150px;

我上面的代码是从http://css-tricks.com/examples/ShapesOfCSS/偷走/修改的（务必检查浏览器兼容性）

您提到您在后续评论中使用了表格。一种简单的方法可能是为这个斜面创建一个基本类，然后将表格的左上角单元格（应该倾斜的单元格）包装在div / span中，类别为“people_slanted”或任何你的名字。

Answer 2

简单的CSS

clip-path: polygon(0 0, 30% 0, 34% 10%, 100% 10%, 100% 100%, 0 100%);

这是从0,0（左上角）开始，然后顺时针旋转每个点。您可以使用px代替％。

Answer 3

引导卡的文件夹样式。

<强> CSS

.class {
    background-color: yellow; 
    color: #222;
    clip-path: polygon(0 23%, 0 7%, 4% 0, 29% 0, 32% 7%, 60% 7%, 98% 7%, 100% 10%, 100% 100%, 15% 100%, 0 100%, 0% 85%);
}

CSS div看起来像一个Windows文件夹图标

3 个答案: