excel как комментарий на ячейке таблицы

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

enter image description here

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

+2
источник поделиться
1 ответ

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

Это сделано, вы можете position:absoute; его absolute (position:absoute;) внутри ячейки с правилами top:0 и right:0. Затем он будет в правом верхнем углу ячейки. Убедитесь, что родительский элемент является либо relative либо absolute. (возможно, просто добавьте 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>
+4
источник

Посмотрите другие вопросы по меткам или Задайте вопрос