1

css で作成されたいくつかの三角形をコンテナーの隣に配置しようとしています。1 つはコンテナーの上に白 (背景を模倣) し、もう 1 つは右側に青で配置します。

いくつかの解決策を試しましたが、三角形の絶対配置を使用することで、絶対配置された三角形の上に要素を追加すると、配置が壊れます。: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>

4

2 に答える 2

2

どうぞ。この jsFiddle にコードがあります: http://jsfiddle.net/xKzuX/

css 矢印を使用する場合は、親で疑似セレクターを使用:beforeし、:afterその部分を使用position: relativeすることをお勧めします (その部分がありました)。

次に、矢印を絶対位置に配置します（その部分もありましたが、値が間違っていました）。

再利用を容易にするために、左/右のクラスを再利用しました。必要な場所に追加するだけです。

最後に、一部のブラウザで矢印のレンダリングがうまくいかない場合は、これを追加transform:rotate(360deg);して 360 度にします (そのため、回転にまったく気付かないでしょう) が、エッジが柔らかくなります。

于 2013-05-23T21:29:55.570 に答える
0

使用する必要があるかもしれません

position:relative

三角形の親 (ここでは #sortables )。

于 2013-05-23T21:14:05.887 に答える