堆叠酒吧css

Question

我想要一个带有内部垂直文本的堆叠酒吧。我没有把它放在正确的位置。这是我想要的：

这是我的代码和输出：

.colWrapper{ 
 
    height:200px; 
 
    width:100px; 
 
    position:relative; 
 
    border:1px solid #ccc; 
 
} 
 
.barContainer{ 
 
    position:absolute; 
 
    bottom:0; 
 
    width:100%; 
 
} 
 
.bar{ 
 
    widith:100%; 
 
    padding:10px; 
 
    transform: rotate(90deg); 
 
    text-align:center; 
 
    margin:0 
 

 
}

<div class="colWrapper"> 
 
    <div class="barContainer"> 
 
     <div class="bar" style="background-color:#b4cde2;">Software</div> 
 
     <div style="clear:both;"></div> 
 
     
 
     <div class="bar" style="background-color:#7ca7cc;">Banking</div> 
 
     
 
    </div> 
 
</div>

Answer 1

您需要使用-90deg而且，使用transform-origin：

.colWrapper { 
 
    height: 200px; 
 
    width: 100px; 
 
    position: relative; 
 
    border: 1px solid #ccc; 
 
} 
 
.barContainer { 
 
    bottom: 0; 
 
    width: 100%; 
 
} 
 
.bar { 
 
    padding: 10px; 
 
    transform: rotate(-90deg); 
 
    text-align: center; 
 
    margin: 0; 
 
    left: -25px; 
 
    transform-origin: right bottom; 
 
    position: absolute; 
 
    width: 100px; 
 
    bottom: 120px; 
 
} 
 
.bar:first-child { 
 
    left: -80px; 
 
}

<div class="colWrapper"> 
 
    <div class="barContainer"> 
 
    <div class="bar" style="background-color:#b4cde2;">Software</div> 
 
    <div class="bar" style="background-color:#7ca7cc;">Banking</div> 
 
    </div> 
 
</div>

第二种方法：

.colWrapper { 
 
    height: 200px; 
 
    width: 100px; 
 
    position: relative; 
 
    border: 1px solid #ccc; 
 
} 
 
.barContainer { 
 
    bottom: -5px; 
 
    width: 100%; 
 
    transform: rotate(-90deg); 
 
    position: absolute; 
 
    left: 5px; 
 
} 
 
.bar { 
 
    padding: 10px; 
 
    text-align: center; 
 
    margin: 0 0 15px; 
 
    sposition: absolute; 
 
} 
 
.bar:first-child { 
 
    left: -80px; 
 
}

<div class="colWrapper"> 
 
    <div class="barContainer"> 
 
    <div class="bar" style="background-color:#b4cde2;">Software</div> 
 
    <div class="bar" style="background-color:#7ca7cc;">Banking</div> 
 
    </div> 
 
</div>

Answer 2

您还可以看看写作模式和Flex-箱。

https://developer.mozilla.org/fr/docs/Web/CSS/writing-mode

div { 
 
    display: inline-flex; 
 
    flex-flow: column wrap; 
 
    height: 320px; 
 
    width: 270px; 
 
    vertical-align: middle; 
 
} 
 
span { 
 
    padding: 20px 5px; 
 
    background: #1E84C6; 
 
    -webkit-writing-mode: vertical-lr; 
 
    /* old Win safari */ 
 
    writing-mode: vertical-lr; 
 
    writing-mode: tb-lr; 
 
    text-align: right; 
 
    margin: 10px; 
 
    height: 100px; 
 
    width: 60px; 
 
    font-size: 30px; 
 
    line-height: 60px; 
 
} 
 
span:nth-child(3) { 
 
    height: 260px; 
 
} 
 
a { 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    letter-spacing: 2px; 
 
    text-transform: uppercase; 
 
    font-family: helvetica; 
 
    color: white; 
 
} 
 
div + div a { 
 
    transform: scale(-1, -1); 
 
    /* reverse writing direction optionnal*/ 
 
    btext-align: left; 
 
    transform-origin: 1em 1.25em; 
 
} 
 
span:nth-child(2) { 
 
    background: #283F4F; 
 
} 
 
span:nth-child(4) { 
 
    background: #1DC685; 
 
} 
 
​-

<div> 
 
    <span> <a href>one</a></span> 
 
    <span> <a href>two</a></span> 
 
    <span> <a href>three</a></span> 
 
    <span> <a href>four</a></span> 
 
    <span> <a href>five</a></span> 
 
</div> 
 
or 
 
<div> 
 
    <span> <a href>one</a></span> 
 
    <span> <a href>two</a></span> 
 
    <span> <a href>three</a></span> 
 
    <span> <a href>four</a></span> 
 
    <span> <a href>five</a></span> 
 
</div> 
 
and so on ...