Triangle/arrow rounded corners using :before

[toolman]

Hi there,

I have the following CSS that adds a triangle/arrow to the right hand side of a div. What I would like to do is have the point of the triangle slightly rounded.

content: "";
 width: 0px;
 height: 0px;
 border: 60px solid transparent;
 position: absolute;
 right: -115px;
 top: 50%;
 transform: translateY(-50%);
 border-left: 60px solid $brand-yellow;
 }

I have tried adding a border-radius, but it didn’t seem to work.

Does anyone have any ideas how I can do this?

Thanks!

[Pepster64]

To add a slightly rounded point to the triangle/arrow in your CSS, you can modify the border and border-left properties to include a small border-radius value for the top-right corner of the border. Here’s an example:

div::after {
  content: "";
  width: 0px;
  height: 0px;
  border: 60px solid transparent;
  position: absolute;
  right: -115px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 60px solid $brand-yellow;
  border-top-right-radius: 10px; /* Add a small border-radius for the top-right corner */
}

This code adds a border-top-right-radius property with a value of 10px to the div::after pseudo-element (assuming that’s what you’re using based on the code snippet you provided). This will round the top-right corner of the border, creating a slightly rounded point for the triangle/arrow.

Note that the border-radius property only works for elements with a border, so you need to include a border for the triangle/arrow in order for this to work. Also, make sure that the $brand-yellow variable is defined somewhere in your CSS or Sass code.

[PaulOB]

@toolman

What I would like to do is have the point of the triangle slightly rounded.

I prefer to use clip-path for this rather the border hack and you can get the round corner like this.

Its basically a square rotated 45 degrees into a point and then then clipped in half. I underlaid the:before element to create a faint shadow but that can be removed easily.

@Pepster64

This code adds a border-top-right-radius property with a value of 10px to the div::after pseudo-element (assuming that’s what you’re using based on the code snippet you provided). This will round the top-right corner of the border, creating a slightly rounded point for the triangle/arrow.

Did I miss something as that doesn’t seem to round the arrow but rounds the transparent part of the border?

[toolman]

Many thanks for your help with this! Using a clip makes sense

[Archibald]

@PaulOB

I prefer to use clip-path for this rather the border hack and you can get the round corner like this.

That’s giving an unwanted artefact in Firefox:

[PaulOB]

@Archibald

That’s giving an unwanted artefact in Firefox:

Hmm that’s a shame.

I’ll have a look when I get back but looks like a bug in Firefox.

[PaulOB]

@PaulOB

I’ll have a look when I get back but looks like a bug in Firefox.

Yes its a Firefox bug.

I tweaked the percentages in the clip-path and the line goes away.

There are other solutions such as adding a border in the background color (border:1px solid red;) or tweaking the size by 2px. (Transformed elements are prone to artefacts appearing unfortunately.)