Question

我正在尝试将css中的一些三角形放在容器旁边，一个在白色的容器上（模仿背景）右侧是蓝色的。

我尝试了几种解决方案，但是通过使用三角形的绝对定位，当我在绝对定位的三角形上方添加元素时，它会破坏它们的定位。我还尝试使用:after和:before的三角形，并使用clear作为容器，但这不起作用。

CSS：

#sortables {
padding: 15px;
}

.sortable {
    list-style-type: none;
    background-color: #d2e0f2;
    padding: 5px;
}  

.sortable li {
    margin: 5px;
    padding: 3px;
}

.sortable li:hover {
    cursor: move
}

ul{
    margin:0;
}

.dimensions_container {
    float: left;
    display: block;
    position: relative;
    width: 160px;
    margin:10px;
} 

.triangle-right{
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 170px;
    width: 0;
    height: 0;
    border-color: transparent transparent transparent #d2e0f2;
    border-style: solid;
    border-width: 17px; 
} 

.triangle-left{
    content: '';
    display: block;
    position: absolute;
    top: 1px;
    left: 25px;
    width: 0;
    height: 0;
    border-color: transparent transparent transparent white;
    border-style: solid;
    border-width: 17px;
}  


.header {
    text-align:center;
    padding: 3px;
    width: 154px;
    background-color: #d2e0f2;
}

HTML：

<div id="sortables">
    <div class="dimensions_container">
        <div class="header">Available groups</div>
        <ul id="sortable1" class="sortable droptrue ui-sortable">
            <li id="undefined" class="ui-state-default">undefined</li>
            <li id="undefined" class="ui-state-default">undefined</li>
            <li id="undefined" class="ui-state-default">undefined</li>
        </ul>
    </div>
    <div class="triangle-right"></div>
    <div class="dimensions_container">
        <div class="header">Grouped by</div>
        <ul id="sortable2" class="sortable droptrue ui-sortable"></ul>
    </div>
    <div class="triangle-left"></div>
    <div class="dimensions_container">
        <div class="header">Drill into</div>
        <ul id="sortable3" class="sortable droptrue ui-sortable"></ul>
    </div>
</div>

Answer 1

你走了。你会在这个jsFiddle中找到代码：http://jsfiddle.net/xKzuX/

使用css箭头时，最好在父级上使用:before和:after伪选择器并使用position: relative（您有该部分）。

然后你绝对定位箭头（你也有那个部分，但错误的值）。

为了方便重用，我重用了你的左/右课程。你可以在任何需要的地方添加它。

最后，如果您的箭头在某些浏览器中渲染效果不佳，请添加transform:rotate(360deg);使其执行360度（因此您根本不会注意到旋转），但它会使边缘变得柔和。

Answer 2

您可能需要使用

position:relative

在三角形的父级上（此处为#sortables）。

CSS三角形与其容器一起浮动

2 个答案: