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

问题描述

需要绘制菜单栏的有棱角的边

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

解决方案

如何使用CSS3 ？

  .shape {
 width：200px; 
 height：50px; 
 -webkit-transform：skew（30deg）; 
 -moz-transform：skew（30deg）; 
 transform：skew（30deg）; 
 background：＃000; 
 margin：20px; 
} 
  

没有什么可解释的，这是一个简单的 div 元素，我用 30deg 扭曲，这将导致您预期的形状。

注意：这是一个CSS3属性，因此旧版浏览器以及IE会破坏您的内容，请务必使用。 / p>

---

其他实现方法是使用： code>：before 伪和CSS三角形以及内容属性。

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

（颜色已更改）

（如您所评论的，您需要使用 top：0; for ：before 和：after ，因为当您添加文本时，它将从顶部移动两个三角形。所以为了防止这种情况，使用 top：0; ）

c> div 元素，并将的两个CSS三角形放置到容器中。这比以上更兼容，如果你要去一个NON CSS3解决方案，你可以选择这个。确保您使用 display：block; 为：之前以及：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; 
} 
  

Need to draw angular sides of menubar as

inner content may be the some labels or links.

解决方案

How about using CSS3 transform skew?

Demo

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

Nothing much to explain here, it's a simple div element, which I've skewed by 30deg which will result in the shape you expected.

Note: It's a CSS3 property, so older browsers, as well as IE will spoil your things, make sure you use CSS3 Pie.

---

Other way to achieve this is by using :after and :before pseudo and CSS Triangles along with content property.

Demo 2 (Kept red triangles for demo purpose)

Demo 3 (Color Changed)

Demo 4 (As you commented, you need to use top: 0; for :before and :after pseudo as well, because when you add text, it will shift both the triangles from the top. So inorder to prevent that, use top: 0;)

Here, am using a simple div element and placing 2 CSS triangles which are positioned absolute to the container. This is more compatible than above, if you are going for a NON CSS3 solution, you can choose this. Make sure you use display: block; for :before as well as :after. And ofcourse you can merge the common styles but I've kept both separate, so that you can get easability to customize them separately.

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

这篇关于使用CSS绘制角边/平行四边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！