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; }

也许你们中的某些人可以提供帮助。

谢谢。

- Dave

---

我不太确定你在问什么。你是在问如何让对角线从一个角落到另一个角落吗？ - Tyler Crompton

请更详细地阐述您的问题。 - algreat

当我把对角线放置在单独的位置时（参见链接＃1），它们看起来很好。但是，如果我想将它们添加到给定的布局中，则不再起作用。您可以在http://jsfiddle.net/9pS3L/找到完整的代码。 - Dave

Answer 1

由于您似乎正在使用CSS3，我已经更新了您的fiddle，使用CSS3渐变：http://jsfiddle.net/9pS3L/1/。看起来这就是您想要实现的效果。您应该使用自己的颜色进行更新。这是一个好用的渐变工具：http://www.colorzilla.com/gradient-editor/。甚至可以兼容IE，但会产生水平渐变（虽然我没有尝试过...）

您还可以使用SASS和compass，这些也是做CSS3的好工具。

尝试使用边框来实现您想要的效果很棘手，因为这不是边框最初建立的目的。

只是举个例子，webkit代码：

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

- Alexandre de Champeaux

---

谢谢你的帮助和渐变工具。我已经更新了代码http://jsfiddle.net/9pS3L/2/。 - Dave

+1 我花了比我想承认的更多时间来创建这种过渡类型的日历日期的图像（我不是真正的CSS专家），但这确实帮助我创造了一个清晰的方法。它还允许（如果CSS3允许）快速引入颜色变化，而无需担心创建新的过渡图像。谢谢！您可以在此处查看代码：http://www.rocksurecollection.com/properties/paris-france?site=collection（转到可用性选项卡）。再次感谢 - jim tollan

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>

- SantoshK