CSS triangles

A category for whatever! Can be Mudlet-related or offtopic.
Post Reply
User avatar
Vadi
Posts: 5035
Joined: Sat Mar 14, 2009 3:13 pm

CSS triangles

Post 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

User avatar
Akaya
Posts: 414
Joined: Thu Apr 19, 2012 1:36 am

Re: CSS triangles

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

User avatar
SlySven
Posts: 1019
Joined: Mon Mar 04, 2013 3:40 pm
Location: Deepest Wiltshire, UK
Discord: SlySven#2703

Re: CSS triangles

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

tobeymurphy
Posts: 1
Joined: Wed Aug 20, 2014 7:37 pm

Re: CSS triangles

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

User avatar
SlySven
Posts: 1019
Joined: Mon Mar 04, 2013 3:40 pm
Location: Deepest Wiltshire, UK
Discord: SlySven#2703

Re: CSS triangles

Post by SlySven »

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

Post Reply