CODEWITHSUNDEEP
htmlcss
dotmindlabs
dotmindlabs

Reputation: 908

CSS triangles floating with their containers

I'm trying to put some triangles made in css next to containers, one over the container in white (imitating the background) and one in blue on the right side.

I tried several solutions, but by using absolute positioning of triangles, when I add an element above the absolutely positioned triangles it breaks their positioning. I also tried the triangles with :after and :before, and using clear for the container, but this did not work.

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>

Upvotes: 1

Views: 1186

Answers (2)

karellm
karellm

Reputation: 1933

Here you go. You'll find the code in this jsFiddle: http://jsfiddle.net/xKzuX/

When using css arrows, it is better to use :before and :after pseudo selector on the parent with a position: relative on it (you had that part).

Then you absolute position the arrow (you had that part too but with wrong values).

To make it easy to reuse, I've reused your left/right classes. You can just add it wherever needed.

Finally, if your arrows render poorly in some browser, add transform:rotate(360deg); which make it do 360deg (so you won't notice the rotation at all) but it softens the edges.

Upvotes: 2

Gregone
Gregone

Reputation: 447

You might need to use 

position:relative

on the parent of your triangles (#sortables here).

Upvotes: 0

Related Questions