CSS三角

Question

我试图添加CSS三角形表<td>元素下，使像 我怎样才能把那个三角形就像漂浮在第二tr上面，而不是改变td高度，例如我的问题：

td { 
 
    padding: 10px; 
 
} 
 
.arrow-down { 
 
    position: relative; 
 
    top: 25px; 
 
    right: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 15px solid transparent; 
 
    border-right: 15px solid transparent; 
 
    border-top: 15px solid #000; 
 
}

<table border="1"> 
 
    <tr> 
 
    <td> 
 
     (1) 
 
    </td> 
 
    <td> 
 
     (2)<br><br> 
 
    </td> 
 
    <td> 
 
     (3) 
 
     <div class="arrow-down"> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     (4) 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="4"> 
 
     bla bla 
 
    </td> 
 
    </tr> 
 
</table>

Answer 1

可以在使用伪元素个

td { 
 
    padding: 10px; 
 
    position:relative 
 
} 
 
tr:first-of-type td:nth-of-type(3)::after { 
 
    content:""; 
 
    position: absolute; 
 
    bottom: -20px; 
 
    right: 5px; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 15px solid transparent; 
 
    border-right: 15px solid transparent; 
 
    border-top: 15px solid #000; 
 
}

<table border="1"> 
 
    <tr> 
 
    <td> 
 
     (1) 
 
    </td> 
 
    <td> 
 
     (2) 
 
     <br /><br /> 
 
    </td> 
 
    <td> 
 
     (3) 
 
    </td> 
 
    <td> 
 
     (4) 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="4"> 
 
     bla bla 
 
    </td> 
 
    </tr> 
 
</table>