css日历 - td背景对角线分裂 - 两种颜色 [英] css calendar - td background diagonal split - two colors

查看：252
本文介绍了css日历 - td背景对角线分裂 - 两种颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I found an css styled calendar at jsfiddle and wanted to add some specific td backgrounds like the diagonal splits here jsfiddle.

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

But combined it looked very distorted 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; }

也许有人可以提供帮助。

Maybe someone of you can help.

Thx

推荐答案

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

Since you seem to be using CSS3, I have updated your fiddle using CSS3 gradients : http://jsfiddle.net/9pS3L/1/ It seems to be what you want to achieve. You should update it with your own colors. Here is a nice gradient tool : http://www.colorzilla.com/gradient-editor/ Should even be IE compatbile, but would make an horiontal gradient (haven't tried it though...)

你也可以使用SASS和指南针，那些都很好工具以及做CSS3。

You can also use SASS and compass, those are nice tools as well to do CSS3.

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

Trying to do what you wanted to achieve with borders is tricky since that's not what borders have been built for in the first place.

仅作为示例，webkit代码：

Just for the example, the webkit code : 

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

这篇关于css日历 - td背景对角线分裂 - 两种颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆