triangle-framed (non-filled)

[lkraav]

This may be a tricky one, requiring both pseudo element positions and other magic.

[ismamz]

Hi @lkraav! Sorry for the delay. How do you think it should be? Something like @util triangle-framed([parameters]) or another name?

There are many parameters to consider:

• background-color
• border-color
• border-size
• width
• height
• direction

[marcustisater]

This is a tricky one, sometimes you would want to adjust the position of the arrow as well (left,right,top,bottom)

[ismamz]

But maybe the position should be defined outside the utility.

.element {
  @util triangle-framed(20px, 10px, #000, 1px solid #000, up);
  top: 10px;
  left: 5px;
}

In this case, we need to think how parameters should be declared,

• width
• height
• background-color
• border (size, style, color)
• direction

it could be an option.

[marcustisater]

Good idea.

I still find this one a little bit tricky, the attached screenshot uses a border width which would require more psuedo elements to be defined but maybe that's not always the case for the user. Why don't we start with a pen to illustrate how we would style the arrow in different scenarios?

[ismamz]

This could be a good starting point: http://www.cssarrowplease.com/