在 HTML 或 Text over Img 标签中赋予 TD 形状

Question

我要实现，

到目前为止我已经实现了，

我写的代码是这样的，

  <html>
  <body>
     <hr color="#FFCC66"/>
     <table width="100%" style="color: blue; margin-top: -3;margin-bottom: -3;">
     <tbody>
         <tr>
             <td align="center" style="font-weight:bolder;" 
                 background="" valign="top">
             <img src="cellbackground.png" width="100%" height="100%" alt="" />
                Who You Are
             </td>
             <td align="center" style="font-weight:bolder; z-index:1; ">
                 <div style="height:100%; width:100%; 
                      background-origin : content; 
                      background-size:100%;  
                      background-image:url(cellbackground.png) ">
                  Applicant's Needs
                </div>
             </td>

             <td align="center" style="font-weight:bolder;">
                Background Information
             </td>
         </tr>
     </tbody>
     </table>
     <hr color="#FFCC66"/>
  </body>
  </html>

如果有更好的方法来实现这个，请提出建议，如果我们可以为 table 的单元格边框赋予形状，那是非常好的方法。

重点是实现应该支持几乎所有的浏览器。

和cellbackground.png文件，

提前致谢。

Answer 1

您无法塑造 table 单元格。您可能想将图像用作背景并将大小属性设置为 cover 或 contain:

td.bubble {
    background-image: url(http://i.stack.imgur.com/ommAw.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
    height: 50px;
}

<table width="100%" style="color: blue; margin-top: -3;margin-bottom: -3;">
    <tbody>
        <tr>
            <td align="center" style="font-weight:bolder;" background="" class="bubble" valign="top">
               Who You Are</td>
            <td align="center" style="font-weight:bolder; z-index:1; ">
                <div style="height:100%; width:100%; 
                      background-origin : content; 
                      background-size:100%;  
                      background-image:url(cellbackground.png) ">Applicant's Needs</div>
            </td>
            <td align="center" style="font-weight:bolder;">Background Information</td>
        </tr>
    </tbody>
</table>

调整尺码以适合。

Answer 2

您可以使用 Pseudo-element 和 class active

table{
  border-top: 2px solid #ff6600;
  border-bottom: 2px solid #ff6600;
  width: 100%;
  color: blue;
  margin-top: -3px 0;
  padding: 10px 0
}

table td{font-weight:bolder;
  text-align: center; 
  vertical-align: top;
  position: relative;
  border-radius: 6px;
  padding: 10px 0;
}
table td.active{
  background: #ff6600;
  color: white
}
table td.active:before{
  content: '';
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #ff6600;
  top: 100%;
  left: 50%;
  margin-left: -5px;
}

<html>
  <body>
     <table>
     <tbody>
         <tr>
             <td class=active>
               Who You Are
             </td>
             <td>
                 Applicant's Needs
             </td>

             <td>
                Background Information
             </td>
         </tr>
     </tbody>
     </table>
  </body>
  </html>

在 HTML 或 Text over Img 标签中赋予 TD 形状

Give shape to TD in HTML or Text over Img tag

html

javascript

css

css-shapes