CSS triangles

[Vadi]

I don't know how much of it applies to Mudlet-supported CSS (aka Qt's CSS), but this is interesting: http://codepen.io/chriscoyier/full/lotjh

[Akaya]

Interesting. Here's an example of one with a Geyser label:

Code: [show] | [select all] lua

triangle = Geyser.Label:new({
  name = "triangle",
  x = "50%", y = "50%",
  width = 100, height = 100,
})
triangle:setStyleSheet([[
  background-color: rgba(0,0,0,0);
  border-style: solid;
  border-bottom-color: red;
  border-top-color: rgba(0,0,0,0);
  border-left-color: black;
  border-right-color: black;
  border-width: 50px;
]])

Though the borders that touch the base of your triangle can't be transparent or the remaining border will appear as a rectangle. I set them to black instead so they match Mudlet's default black. The width and height of label needs to be half of the border-width. Not 0x0 as the video describes.

[SlySven]

Um, what is supposed to happen, I see a dark background with a staff-equipped figure and some text on the left side - but enabling javascript and third party requests doesn't seem to help. There is a browser selection option but there is not a choice that really matched my setup Debian rebranded FireFox on a GNU/Linux platform...

[tobeymurphy]

You provided good example which demonstrates, how works triangles in CSS. Actually it's some kind of trick, there is no special property for this. But, if you need to change change of triangle, I would recommend to read this article: different shapes and orientations for triangles using only CSS. Anyway, this is cross-browser and it works even in IE7.

[SlySven]

The original link that Vadi posted has rotted but it is still available from the Wayback machine.