Immortal Immortal - 24 days ago 8
AngularJS Question

excel like comment on table cell

Hi Folks I am not very good with CSS. I am using Angular, Bootstrap to achieve an excel like comments cell in with css bootstrap.

enter image description here

I tried using css with font awesome icons, however I am not able to do it may be because of my limited css skills. Can someone please help me with this.

Answer Source

There is an easy way to create triangles just with CSS, you don't even need font awesome: How do CSS triangles work?. The trick is to use an element with a width / height of 0.

This done, you can position it absolute (position:absoute;) inside the cell with the rules top:0 and right:0. Then it will be on the top right of the cell. Make sure the parent element is either relative or absolute positioned. (maybe just add position:relative; to the cell if you want to keep the static / default position)

A basic example of a triangle you can see in the following example. Just add the rules I told you, place it inside the cell and change the width/height of it how you like it (that means the border-width).

.triangle-up-right {
  width: 0;
  height: 0;
  border-top: 50px solid rgb(246, 85, 85);
  border-left: 50px solid transparent;
}
<div class="triangle-up-right"></div>

Here I mocked your cell to show you how it's working:

.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;
}
<div class="cell"><div class="triangle-up-right"></div></div>