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

Question

需要将菜单栏的角边绘制为

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

Answer 1

使用 CSS3怎么样transform skew？

演示

.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属性。

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

演示 3（颜色已更改）

Demo 4（正如您评论的那样，您还需要使用top: 0;for:before和:afterpseudo ，因为当您添加文本时，它会从顶部移动两个三角形。所以为了防止这种情况，使用top: 0;）

在这里，我使用了一个简单的div元素并放置了 2 个positioned absolute用于容器的 CSS 三角形。这比上面的更兼容，如果你想要一个非 CSS3 的解决方案，你可以选择这个。确保您使用display: block;for: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，正确对齐它们，并为所有这些 div 赋予相同的颜色，等等……太麻烦了。

最好的方法是使用transform: skew()较新的浏览器。

但是您需要记住，这也会转换该 div 中的每个元素。因此，菜单栏中的文本也会出现倾斜。为了解决这个问题，在内部 div 上添加一个反向倾斜，如下所示：

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

玩得开心实验... :)