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>