擅长表格单元格的评论

Question

嗨伙计我对CSS不是很了解。我正在使用Angular，Bootstrap来实现像css bootstrap中的注释单元格。

我尝试使用带有字体真棒图标的css，但是我无法做到这一点可能是因为我有限的CSS技能。有人可以帮我解决这个问题。

Answer 1

有一种简单的方法可以用CSS创建三角形，你甚至不需要字体真棒：How do CSS triangles work?。诀窍是使用宽度/高度为0的元素。

完成后，您可以使用规则absolute和position:absoute;将其top:0（right:0）置于单元格内。然后它将位于单元格的右上角。确保父元素位于relative或absolute。 （如果你想保持静态/默认位置，可能只需将position:relative;添加到单元格中）

您可以在以下示例中看到的三角形的基本示例。只需添加我告诉你的规则，将它放在单元格中，然后根据你喜欢的方式改变它的宽度/高度（这意味着边框宽度）。

＆＃13;

＆＃13;

.triangle-up-right {
  width: 0;
  height: 0;
  border-top: 50px solid rgb(246, 85, 85);
  border-left: 50px solid transparent;
}

＆＃13;

<div class="triangle-up-right"></div>

＆＃13;

＆＃13;

＆＃13;

在这里，我嘲笑你的单元格，告诉你它是如何工作的：

＆＃13;

＆＃13;

.cell {
   width:200px;
   height:65px;
   position:relative;
   border:1px solid #eee;
   background-color:#fcfcfc;
 }

.triangle-up-right {
  width: 0;
  height: 0;
  border-top: 10px solid rgb(246, 85, 85);
  border-left: 10px solid transparent;
 top:0;
 right:0;
 position:absolute;
}

＆＃13;

<div class="cell"><div class="triangle-up-right"></div></div>

＆＃13;

＆＃13;

＆＃13;