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

Question

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

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

但问题是三角形在传递元素的边界后隐藏。 z-index在这里没有帮助。我知道确实有几种方法可以实现这一点，但无法找到。

Answer 1

首先，您可以查看http://cssarrowplease.com/ 你永远不能让背景图像超出包含它的div，所以为什么不把整个按钮变成一个图像，包括蓝色框和三角形呢？

或者，如果你绝对想要两个对象，你可以把它们包起来。

<div>
    <div class="blue-box"></div>
    <div class="triangle"></div>
</div>

Answer 2

你实际上可以使用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;
}