從下到上，從右到一個更大的（日曆）內左側位置的小矩形

Question

我建立一個日曆，這是我後： http://postimg.org/image/vpd10bkqt/

所以基本上我想告訴所有的事件作爲適當的一天的大矩形內的一個小矩形。

難度是第一個元素應顯示在右下角 ，並且應該從右到左和從下到上填充表格。

我認爲最簡單的解決方案是，如果一個矩形是一個 跨度元素，它周圍有一個實心邊框，並且它包含一個點作爲文本。

這裏是一個演示的jsfiddle： http://jsfiddle.net/jv392gmv/

CSS：

section#calendar { 
     width: 970px; 
    } 

    time { 
     display: inline-block; 
     width: 120px; 
     height: 120px; 
     margin: 4px; 
     text-align: right; 
     font-size: x-large; 
     font-weight: 900; 
     border: 1px solid #c3c7c7; 
     border-radius: 5px; 
     background: #fff; 
    } 
    time.notmonth { 
     background: #777; 
    } 
    section#calendar h1 { 
     text-align: center; 
    } 
    section#calendar time a { 
     display: inline-block; 
     width: 110px; 
     height: 110px; 
     margin: 5px 5px 0 0; 
     padding: 3px 3px 0 0; 
     color: #f55b2c; 
     text-decoration: none; 
    } 
    section#calendar time a:hover { 
     color: #000; 
     } 

    span.event { 
     top: 10%; 
     left: 7px; 
     position: relative; 
     border-color: #222; 
     border-style: solid; 
     border-radius: 5px; 
     border-width: 5px; 

    } 

HTML：

<section id="calendar"> 
     <h1> 
     <a href="prevyear" title="previous" accesskey=",">←</a> 
     July 2015 
     <a href="/nextyear" title="next" accesskey=".">→</a> 
     </h1> 
     <time datetime="2011-05-29"> 
     <a href="#">29</a> 
     <!-- <span class="event">.</span> --> 
     </time> 
    </section> 

任何人有任何想法如何實現的呢？

原來的時間標籤的想法來自這裏： http://thenewcode.com/355/HTML5-Calendar-With-CSS3-and-Microdata

Answer 1

在容器中，設置的180度旋轉。

在孩子們，再次旋轉，讓他們直立

.base { 
 
    width: 140px; 
 
    height: 140px; 
 
    border: solid 1px black; 
 
    position: relative; 
 
} 
 
.test { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    transform: rotate(180deg); 
 
} 
 

 
.children { 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: lightblue; 
 
    transform: rotate(180deg); 
 
    display: inline-block; 
 
    margin: 2px; 
 
}

<div class="base"> 
 
    <div >123</div> 
 
    <div class="test"> 
 
    <div class="children">1</div> 
 
    <div class="children">2</div> 
 
    <div class="children">3</div> 
 
    <div class="children">4</div> 
 
    <div class="children">5</div> 
 
    <div class="children">6</div> 
 
    <div class="children">7</div> 
 
    </div> 
 
</div>