Page 1 of 1

CSS triangles

Posted: Wed Oct 09, 2013 7:26 am
by 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

Re: CSS triangles

Posted: Wed Oct 09, 2013 11:39 pm
by 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.

Re: CSS triangles

Posted: Mon Jun 09, 2014 11:44 pm
by 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...

Re: CSS triangles

Posted: Wed Aug 20, 2014 7:42 pm
by 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.

Re: CSS triangles

Posted: Sat Nov 12, 2016 12:32 pm
by SlySven
The original link that Vadi posted has rotted but it is still available from the Wayback machine.