css日历 - td背景对角线分裂 - 两种颜色

Question

我在jsfiddle找到了一个css风格的日历，并想在这里添加一些特定的td背景，比如对角线分割jsfiddle。

但结合它看起来非常扭曲jsfiddle。

HTML：

  <table>
  <thead>
  <tr>
      <th colspan="8">
          Oktober 2011
      </th>
  </tr>
  </thead>
  <tbody>
  <tr>
      <th class="cw">KW</th>
      <th>Mo</th>
      <th>Di</th>
      <th>Mi</th>
      <th>Do</th>
      <th>Fr</th>
      <th>Sa</th>
      <th>So</th>
  </tr>
  <tr>
      <td class="cw">39</td>
      <td class="off">26</td>
      <td class="off">27</td>
      <td class="off">28</td>
      <td class="off">29</td>
      <td class="off">30</td>
      <td class="free">1</td>
      <td class="free">2</td>
  </tr>
  <tr>
      <td class="cw">40</td>
      <td class="free">3</td>
      <td class="free">4</td>
      <td class="free">5</td>
      <td class="free">6</td>
      <td class="free">7</td>
      <td class="booked_pm">8</td>
      <td class="booked">9</td>
  </tr>
  <tr>
      <td class="cw">41</td>
      <td class="booked">10</td>
      <td class="booked">11</td>
      <td class="booked">12</td>
      <td class="booked">13</td>
      <td class="booked">14</td>
      <td class="booked_am">15</td>
      <td class="free">16</td>
  </tr>
  <tr>
      <td class="cw">42</td>
      <td class="free">17</td>
      <td class="free">18</td>
      <td class="free">19</td>
      <td class="free">20</td>
      <td class="free">21</td>
      <td class="free">22</td>
      <td class="free">23</td>
  </tr>
  <tr>
      <td class="cw">43</td>
      <td class="free">24</td>
      <td class="free">25</td>
      <td class="free">26</td>
      <td class="free">27</td>
      <td class="free">28</td>
      <td class="free">29</td>
      <td class="free">30</td>
  </tr>
  <tr>
      <td class="cw">44</td>
      <td class="free">31</td>
      <td class="off">1</td>
      <td class="off">2</td>
      <td class="off">3</td>
      <td class="off">4</td>
      <td class="off">5</td>
      <td class="off">6</td>
  </tr>
  </tbody>

CSS：

body {
background-color: #f4f4f4; }

table {
-webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
-ms-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
-o-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
border-spacing: 0;
font-family: 'Helvetica Neue';
width: 239px; }

table thead th {
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
-ms-border-radius: 1px;
-o-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: inset 0 1px 0 0 #e88486;
-moz-box-shadow: inset 0 1px 0 0 #e88486;
-ms-box-shadow: inset 0 1px 0 0 #e88486;
-o-box-shadow: inset 0 1px 0 0 #e88486;
box-shadow: inset 0 1px 0 0 #e88486;
background-color: #e56568;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e56568), color-stop(100%, #bd3f41));
background-image: -webkit-linear-gradient(top, #e56568, #bd3f41);
background-image: -moz-linear-gradient(top, #e56568, #bd3f41);
background-image: -ms-linear-gradient(top, #e56568, #bd3f41);
background-image: -o-linear-gradient(top, #e56568, #bd3f41);
background-image: linear-gradient(top, #e56568, #bd3f41);
border: 1px solid #ac2826;
color: white;
font-size: 13pt;
font-weight: 400;
padding: 8px 0;
text-align: center;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3); }

table tbody th {
-webkit-box-shadow: inset 0 1px 0 0 white;
-moz-box-shadow: inset 0 1px 0 0 white;
-ms-box-shadow: inset 0 1px 0 0 white;
-o-box-shadow: inset 0 1px 0 0 white;
box-shadow: inset 0 1px 0 0 white;
background-color: #f5f5f5;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #e8e8e8));
background-image: -webkit-linear-gradient(top, #f5f5f5, #e8e8e8);
background-image: -moz-linear-gradient(top, #f5f5f5, #e8e8e8);
background-image: -ms-linear-gradient(top, #f5f5f5, #e8e8e8);
background-image: -o-linear-gradient(top, #f5f5f5, #e8e8e8);
background-image: linear-gradient(top, #f5f5f5, #e8e8e8);
border-bottom: 1px solid #d4d4d4;
color: #666666;
font-size: 7.5pt;
font-weight: normal;
padding: 4px 0;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
text-transform: uppercase;
width: 34px; }

table tbody th:first-child {
border-left: 1px solid #abb6bf; }
table tbody th:last-child {
border-right: 1px solid #abb6bf; }
table tbody td {
background-color: #fcfdfd;
border-bottom: 1px solid #e2e2e2;
border-left: 1px solid #e2e2e2;
color: #444444;
font-size: 11pt;
font-weight: bold;
height: 27px;
padding: 0;
text-align: center;
width: 34px; }
table tbody td.off {
color: #9ea2a7; }
table tbody td:last-child {
border-right: 1px solid #abb6bf; }
table tbody td:first-child {
border-left: 1px solid #abb6bf; }
table tbody td:not(:last-child) {
-webkit-box-shadow: inset -1px 0 0 0 #eeefef;
-moz-box-shadow: inset -1px 0 0 0 #eeefef;
-ms-box-shadow: inset -1px 0 0 0 #eeefef;
-o-box-shadow: inset -1px 0 0 0 #eeefef;
box-shadow: inset -1px 0 0 0 #eeefef; }

table tbody th.cw {
border-bottom: none; }

table tbody td.cw {
background-color: #e8e8e8;
border-bottom: none;
color: #666666;
font-size: 7.5pt;
font-weight: normal;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
text-transform: uppercase; }

table tbody td.free {
background-color: #007700;
color: #fff; }

table tbody td.booked {
background-color: #c43c35;
color: #fff; }

table tbody td.booked_am, table tbody td.booked_pm {
height: 27px !important;
display: inline-block;
background: transparent; }

table tbody td.booked_am {
line-height: 0%;
width: 0px;
background-color:#007700;
border-top: 27px solid transparent;
border-right: 32px solid #c43c35;
color: #fff; }

table tbody td.booked_pm {
line-height: 0%;
width: 0px;
background-color:#007700;
border-top: 27px solid #c43c35;
border-right: 32px solid transparent;
color: #fff; }

也许有人可以提供帮助。

THX

Answer 1

由于您似乎使用CSS3，我使用CSS3渐变更新了您的小提琴：http://jsfiddle.net/9pS3L/1/ 这似乎是你想要实现的目标。 您应该使用自己的颜色更新它。这是一个很好的渐变工具：http://www.colorzilla.com/gradient-editor/甚至应该是IE compatbile，但会产生一个horiontal渐变（虽然没有试过......）

你也可以使用SASS和指南针，这些也是做CSS3的好工具。

尝试做你想要用边框实现的东西是很棘手的，因为这不是首先构建的边界。

仅举例来说，webkit代码：

div{
    width:20px;
    height:20px;
    background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,red), color-stop(50%,green));
}

Answer 2

我们可以使用以下概念来分割多种颜色

table {
    border-collapse: collapse;
}
td {
    border: 1px solid black;
    padding: 5px 10px;
}
td.two-color {
    background-image: -webkit-linear-gradient(left, #fbd304 0%, #fbd304 50%, #ffff00 50%, #ffff00 100%);
    background-image: -moz-linear-gradient(left, #fbd304 0%, #fbd304 50%, #ffff00 50%, #ffff00 100%);
    background-image: -ms-linear-gradient(left, #fbd304 0%, #fbd304 50%, #ffff00 50%, #ffff00 100%);
    background-image: -o-linear-gradient(left, #fbd304 0%, #fbd304 50%, #ffff00 50%, #ffff00 100%);
    background-image: linear-gradient(left, #fbd304 0%, #fbd304 50%, #ffff00 50%, #ffff00 100%);
}

td.three-color {
    background-image: -webkit-linear-gradient(left, red 20%, red 56%, green 60%, yellow 80%);
    background-image: -moz-linear-gradient(left, #1EBFE1 0%, #1EBFE1 50%, #34D12C 50%, #34D12C 100%);
    background-image: -ms-linear-gradient(left, #1EBFE1 0%, #1EBFE1 50%, #34D12C 50%, #34D12C 100%);
    background-image: -o-linear-gradient(left, #1EBFE1 0%, #1EBFE1 50%, #34D12C 50%, #34D12C 100%);
    background-image: linear-gradient(left, #1EBFE1 0%, #1EBFE1 50%, #34D12C 50%, #34D12C 100%);
}

td.multi-color {
  background: linear-gradient(to left, tomato 45%, lightgray 56%, green 33%, yelow 33%);
}

.columns-bg {
  background-image:
    linear-gradient(
      to right, 
      #ff7400,
      #ff7400 33%,
      #fbd304 33%,
      #fbd304 66%,
      #ffff00 66%
    );
}

<table>
    <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
    </tr>
    <tr>
        <td>Lorem ipsum</td>
        <td class="two-color">Lorem ipsum</td>
    </tr>
    <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
    </tr>
    <tr>
        <td class="two-color">Lorem ipsum</td>
        <td class="three-color">Lorem ipsum</td>
    </tr>
</table>
<br/>
<table>
  <tr>
    <td class="columns-bg">
      Two Color Background
    </td>
  </tr>
</table>