css calendar - td background diagonal split - two

2019-07-20 02:51发布

站内问答 / HTML/CSS
1139 2 4

I found an css styled calendar at jsfiddle and wanted to add some specific td backgrounds like the diagonal splits here 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

2条回答
ゆ 、 Hurt°
2楼-- · 2019-07-20 03:24

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...)

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.

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));
}
查看更多
0人赞 添加讨论(0) 举报
聊天终结者
3楼-- · 2019-07-20 03:30

We can split the multiple color by using below concepts 

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>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)