css - 需要在 css 中创建带三 Angular 形的容器

Question

我有这样的设计元素。如何在页面上创建它？我的第一个猜测是创建三 Angular 形图像并将其添加到我的元素的右侧，如下所示:

.profile-menu :hover
{
    background-color: #50BBFF;
    background-image: url("/Images/menu-triangle.png") ;
    background-position: right center; 
    background-repeat: no-repeat; 
    background-position: 145px 15px;
}

但这里的问题是三 Angular 形在通过元素的边界后隐藏了。 z-index 在这里没有帮助。我知道肯定有几种方法可以实现这一目标，但找不到那个。

Answer 1

实际上，您可以使用 CSS3 的多个背景图像仅使用背景图像来完成此操作。

我昨天整理了一个例子，你可以在这里看到。如果您知道盒子的尺寸，则可以使用此方法。

http://jsfiddle.net/spacebeers/T8Yzj/39/

.box3 {
    z-index: 100;
    border: none;
    padding: 10px 0 30px 0;    
    background-image: url("http://test.mark-design.co.uk/4ik4e7ic.png"), url('http://test.mark-design.co.uk/line.png');
    background-position: 50% -1px, left top;
    background-repeat: no-repeat, repeat-x;
}

编辑:

你也可以在没有任何图像的情况下做你想做的事 - http://jsfiddle.net/spacebeers/T8Yzj/55/

.box2 {
    width: 100px;
    height: 50px;
    background: red;
    color: white;
    position:relative
}

.box2:after {
    content: "";
    position:absolute;
    width: 0;
    height: 0;
    bottom: 25%;
    left:100px;
    border-left: 10px solid #000;
    border-right: 10px solid transparent;   
    border-bottom: 10px solid transparent;    
    border-top: 10px solid transparent;
}