Превосходно, как комментарий на ячейке таблицы

Question

Привет, Я не очень хорошо разбираюсь в CSS. Я использую Angular, Bootstrap, чтобы добиться превосходства, например, в ячейке комментариев с помощью бутстрапа css.

Я попытался с помощью CSS с шрифтами удивительной иконкой, однако я не в состоянии сделать это может быть из-за мои ограниченные навыки CSS. Может кто-то, пожалуйста, помогите мне с этим.

Answer 1

Существует простой способ создания треугольников только с помощью CSS, вам даже не нужен шрифт: How do CSS triangles work?. Хитрость заключается в том, чтобы использовать элемент с шириной/высотой 0.

Это сделано, вы можете поместить его absolute (position:absoute;) внутри клетки с правилами top:0 и right:0. Затем он будет в правом верхнем углу ячейки. Убедитесь, что родительский элемент находится либо relative, либо . (возможно, просто добавьте position:relative; в ячейку, если вы хотите сохранить статическую/стандартную позицию)

Основной пример треугольника, который вы можете увидеть в следующем примере. Просто добавьте правила, которые я вам сказал, поместите их в ячейку и измените ее ширину/высоту, как вам нравится (это означает ширину границы).

.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>

Здесь я издевался вашу клетку, чтобы показать вам, как это работает:

.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>