css table td triple diagonal split

Question

This is the result that I am going for:

(The three Chinese are 调类, 调值 and 方言点.)

I just need a single td class that I can implement in my css table.

I've seen examples using pngs or other image files, but I'm not looking for an image to load each time the table is loaded.

The answer here is not bad:

Create diagonal border of a cell

but I just can't get it to do what I want!

my solution so far is just to have a single td like this:

looks kind of ugly though:

*"I just need a single td class that I can implement in my css table."* ...yeah, good luck with that! HTML elements are rectangular and although you can fake otherwise it's probably not going to be effective here. — Paulie_D, Mar 18 '16 at 15:14

score 3 · Accepted Answer · answered Mar 18 '16 at 16:00

You can change your HTML code a bit and use following styles:

.cell-divided {
 position: relative;
 width: 100px;
 height: 75px;
 border: 1px solid #513F33;
 color: #513F33;
 overflow: hidden;
}
.cell-divided > div {
 position: absolute;
 left: 0;
 top: 0;
 height: 1em;
 line-height: 1em;
 margin-top: -.5em;
 padding: 0 40px 0 0;
 width: 100%;
 text-align: right;
 white-space: nowrap;
 -webkit-transform-origin: 0 bottom;
 transform-origin: 0 bottom;
}
.cell-divided > div > span {
 display: inline-block;
}
.cell-divided > div:nth-child(1) {
 -webkit-transform: rotate(13deg);
 transform: rotate(13deg);
 left: -2px;
 top: -1px;
}
.cell-divided > div:nth-child(1) > span {
 -webkit-transform: rotate(-13deg);
 transform: rotate(-13deg);
}
.cell-divided > div:nth-child(2) {
 -webkit-transform: rotate(24deg);
 transform: rotate(24deg);
 border-bottom: 1px solid #513F33;
 height: 0;
 line-height: 0;
 margin-top: -1px
}
.cell-divided > div:nth-child(3) {
 -webkit-transform: rotate(38deg);
 transform: rotate(38deg);
 left: -4px;
}
.cell-divided > div:nth-child(3) > span {
 -webkit-transform: rotate(-38deg);
 transform: rotate(-38deg);
}
.cell-divided > div:nth-child(4) {
 -webkit-transform: rotate(53deg);
 transform: rotate(53deg);
 border-bottom: 1px solid #513F33;
 height: 0;
 line-height: 0;
 margin-top: -1px;
}
.cell-divided > div:nth-child(5) {
 -webkit-transform: rotate(75deg);
 transform: rotate(75deg);
 left: -12px;
 top: -30px;
}
.cell-divided > div:nth-child(5) > span {
 -webkit-transform: rotate(-75deg);
 transform: rotate(-75deg);
}

<table>
    <tbody>
        <tr>
            <td class="cell-divided">
                <div>
                    <span>调</span>
                    <span>类</span>
                </div>
                <div></div>
                <div>
                    <span>调</span>
                    <span>值</span>
                </div>
                <div></div>
                <div>
                    <span>方</span>
                    <span>言</span>
                    <span>点</span>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Of course, you will need to adjust styles to your table.

Also on this Fiddle.

It comes out like that because you have other styles on you web page. You need to inspect elements and correct styles overriding (as for example text-align). How it should come out is in the code above, so you can adjust code or hire a developer to do it for you (I'm not free). Cheers — skobaljic, Mar 18 '16 at 16:13

css table td triple diagonal split

1 Answers1