使用CSS绘制角度侧/平行四边形

Question

需要将菜单角的两侧绘制为

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

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三角形以及content属性。

Demo 2（为演示目的保留红色三角形）

Demo 3（换色）

Demo 4（正如您所评论的那样，您需要top: 0;使用:before和:after伪，因为当您添加文字时，它会移动两个三角形从顶部开始。为了防止这种情况发生，请使用top: 0;）

在这里，我使用一个简单的div元素并将2个CSS三角形positioned absolute放置到容器中。这比上面更兼容，如果你想要一个NON CSS3解决方案，你可以选择这个。确保对display: block;以及:before使用:after。当然，你可以合并常见的样式，但我保持两者分开，这样你就可以轻松地单独定制它们。

 .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;
}

Answer 2

HTML

<div class="shape">
    <div class="text">
           text goes here
    </div>
 </div>

CSS

 .shape { 
    width: 200px; 
    height: 30px; 
    -webkit-transform: skew(30deg); 
    -moz-transform: skew(30deg); 
    transform: skew(30deg);
    background: #000;
    margin: 20px;
    color:#fff;
}
.text{
    width: 150px; 
    height: 30px; 
    margin:0px auto;
    -webkit-transform: skew(-30deg); 
    -moz-transform: skew(-30deg); 
    transform: skew(-30deg);
     color:#fff;
}

Answer 3

我使用三角形边框的一个主要抱怨是没有简单的方法可以使多个三角形具有不同的颜色，即使使用javascript [因为JS无法访问伪元素：before和：after]，替代方案因为我使用3个div，正确对齐它们，并给它们所有颜色相同等等......太麻烦了。

最佳方式是将transform: skew()用于较新的浏览器。

但是你需要记住，这也将改变div中的每个元素。所以菜单栏里面的文字也会出现偏差。要解决此问题，请在内部div上添加 reverse-skew ，如下所示：

.menu-container {
   ...
   transform: skewX(30deg);
   ...
}
.menu-inner {
   ...
   transform: skewX(-30deg);
   ...
}

玩得开心试验...... :)