css - 使用 CSS 绘制斜边/平行四边形

Question

需要将菜单栏的棱 Angular 绘制为

内部内容可能是一些标签或链接。

Answer 1

如何使用 CSS3 transform skew ？

Demo

.shape { 
    width: 200px; 
    height: 50px; 
    -webkit-transform: skew(30deg); 
    -moz-transform: skew(30deg); 
    transform: skew(30deg);
    background: #000;
    margin: 20px;
}

这里没什么好解释的，它是一个简单的 div 元素，我将其倾斜了 30deg，这将导致您期望的形状。

注意:这是一个 CSS3 属性，所以旧的浏览器和 IE 会破坏你的东西，确保你使用 CSS3 Pie .

---

实现此目的的其他方法是使用 :after 和 :before 伪和 CSS 三 Angular 形以及 content 属性。

Demo 2 (保留红色三 Angular 形用于演示目的)

Demo 3 (颜色改变)

Demo 4 (正如您所评论的，您还需要使用 top: 0; 为 :before 和 :after 伪，因为当您添加文本时，它会从顶部移动两个三 Angular 形。所以为了防止这种情况，请使用 top: 0;)

在这里，我使用了一个简单的 div 元素，并将 2 个 positioned absolute 的 CSS 三 Angular 形放置到容器中。这比上面更兼容，如果你想要一个非 CSS3 解决方案，你可以选择它。确保为 :before 和 :after 使用 display:block;。当然，您可以合并常用样式，但我将两者分开，以便您可以轻松地分别自定义它们。

 .shape { 
    width: 200px; 
    height: 50px; 
    background: #000;
    margin: 50px;
    position: relative;
}

.shape:before {
    display: block;
    content: "";
    height: 0;
    width: 0;
    border: 25px solid #f00;
    border-bottom: 25px solid transparent;
    border-left: 25px solid transparent;
    position: absolute;
    left: -50px;
}

.shape:after {
    display: block;
    content: "";
    height: 0;
    width: 0;
    border: 25px solid #f00;
    border-top: 25px solid transparent;
    border-right: 25px solid transparent;
    position: absolute;
    right: -50px;
}