CSS triangles

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

CSS triangles

Post by Vadi » Wed Oct 09, 2013 7:26 am

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: 412
Joined: Thu Apr 19, 2012 1:36 am

Re: CSS triangles

Post by Akaya » Wed Oct 09, 2013 11:39 pm

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: 894
Joined: Mon Mar 04, 2013 3:40 pm
Location: Deepest Wiltshire, UK
Discord: SlySven#2703

Re: CSS triangles

Post by SlySven » Mon Jun 09, 2014 11:44 pm

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

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: 894
Joined: Mon Mar 04, 2013 3:40 pm
Location: Deepest Wiltshire, UK
Discord: SlySven#2703

Re: CSS triangles

Post by SlySven » Sat Nov 12, 2016 12:32 pm

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

Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests