0

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

.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 在这里没有帮助。我知道肯定有几种方法可以实现这一目标，但找不到一种。

4

2 回答 2

2

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

或者，如果您绝对想要两个对象，则可以将它们包裹起来。

<div>
    <div class="blue-box"></div>
    <div class="triangle"></div>
</div>
于 2012-07-26T08:08:29.107 回答
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;
}
于 2012-07-26T08:13:38.797 回答