Question

我正在尝试使用css在div之前添加一个三角形，但它最终会在它下面。

HTML

<div id="container">
    1234   

    <div id="toolbar">
        Want silly triangle before this div to left
    </div>    
</div>

CSS

#container {
     width: 500px;
}

#toolbar:before
{
    width: 44px;
    content: '';
    height: 0px;
    border-style: solid;
    border-width: 0 0 44px 44px;
    border-color: transparent transparent blue transparent;
}

#toolbar {
    float: right;
    width: 350px;
    height: 44px;
    background: blue;
    color: #fff;
}

是否有遗漏如显示：内联或其他什么？

Answer 1

使用CSS定位正确设置三角形，在下面的示例中，我在父元素上使用position: relative;，而不是使用position: absolute;用于:before伪...而不是使用left属性，它是元素width

的多播

总是你应该用absolute定位的容器包裹relative定位的元素，否则你的元素会在野外飞出。

Demo

#container {
     width: 500px;
}

#toolbar:before {
    position: absolute;
    left: -88px; /* Double the element size */
    width: 44px;
    content: '';
    height: 0px;
    border-style: solid;
    border-width: 0 0 44px 44px;
    border-color: transparent transparent blue transparent;
}

#toolbar {
    float: right;
    width: 350px;
    height: 44px;
    background: blue;
    color: #fff;
    position: relative;
}

注意：通常在使用CSS创建三角形时，它是一个通常的做法是将元素height和width设置为0，以便如果你想要，只需要调整它们。

Answer 2

尝试将您的div＃工具栏放在position:relative中，并以绝对方式定位您的伪元素。然后调整位置和边距以正确定位。

http://jsfiddle.net/LwE7u/2/

div之前的CSS3-triangle

2 个答案: