css rounded corner of right angled triangle

Question

I am creating a small stylised triangular motif 'before' my h1 element, but I am not able to get the corners rounded correctly. The top right is fine but the other two has this clipping issue.

Here is the output along with a blown up image of the shape:

The code used is below:

h1:before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 10px;
  clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
  -webkit-clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
  background-color:  #34495e;
  border-radius: 0.12em;
}

<h1>Heading</h1>

I would like all corners to be smoothly rounded without any sharp corners. Perhaps there is a better way to do this. Any other tips to improve this are also welcome.

Are you trying to get it so that each corner in the triangle is rounded? Do you have to do this in CSS? SVG might be simpler — Scrimothy
– Scrimothy, Commented Mar 1, 2019 at 17:34
That's my backup plan. But, it would be great if I could just get it done in CSS. — mindlessgreen
– mindlessgreen, Commented Mar 1, 2019 at 17:34
Possible duplicate of How to make 3-corner-rounded triangle in CSS — Anurag Srivastava
– Anurag Srivastava, Commented Mar 1, 2019 at 17:46

mindlessgreen · Accepted Answer · 2019-03-01 21:40:22Z

2

Here is an idea where you can rely on 2 pseudo element and some background coloration to approximate it. You simply need to find the correct value to have the perfect overlap between both pseudo elements.

h1 {
  padding-left:1em;
  position:relative;
}

h1:before {
  content: "";
  position:absolute;
  left: 0;
  top: calc(50% - 0.35em);
  width: 0.7em;
  height: 0.7em;
  background: linear-gradient(to bottom left, #34495e 50%, transparent 50%);
  border-radius: 0.1em;
}
h1:after {
  content: "";
    position: absolute;
    left: 3.8px;
    top: -0.1px;
    width: 0.92em;
    height: 0.8em;
    margin-right: 10px;
    background: linear-gradient(to top,#34495e 3.5px,transparent 5px);
    border-radius: 0.1em;
    transform: rotate(45deg);
    z-index: -1;
}

<h1>Heading</h1>

edited Mar 1, 2019 at 21:40

mindlessgreen

12.3k18 gold badges79 silver badges127 bronze badges

answered Mar 1, 2019 at 19:56

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gabriele Petrioli · Accepted Answer · 2019-03-01 17:30:35Z

1

That is because you are rounding the whole node. Apply border-radius only to the top-right corner

h1:before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 10px;
  clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
  -webkit-clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
  background-color:  #34495e;
  border-radius: 0 0.12em 0 0;
}

<h1>Heading</h1>

answered Mar 1, 2019 at 17:30

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

2 Comments

mindlessgreen Over a year ago

Ok So i wasn't very clear with my question. My aim to keep all corners rounded. I would like the top-left and bottom-right to be smoothly rounded similar to the top-right.

Gabriele Petrioli Over a year ago

@rmf i do not think there is a direct way (like a specific value) to do it. You could use an svg for the clip-path or you could define a much more detailed polygon which approximates the curve you want.

Toms Code · Accepted Answer · 2019-03-01 17:38:51Z

0

You can add additional styling to each individual corner in your CSS by adding:

border-radius: 0.4em 0.1em 0.4em 0.1em

You can change these numbers to suit what you need. The first and the third (the ones I've added 0.4em next to) control the corners that you are looking for I believe.

edited Mar 1, 2019 at 17:38

answered Mar 1, 2019 at 17:31

Toms Code

1,7595 gold badges22 silver badges38 bronze badges

2 Comments

mindlessgreen Over a year ago

It doesn't matter what value I round the corners with, the polygon is still going to clip it making it look weird. With a smaller value, I suppose it will be slightly less noticeable.

Toms Code Over a year ago

Ah I understand, I think I would go down the SVG route in that case

Scrimothy · Accepted Answer · 2019-03-01 18:01:15Z

Aside from SVG or manually constructing the curves in the clip-path, you could add an :after element to act as the curved hypotenuse. This has a lot of magic numbers in it to get sizing and placement right, so I'm not sure how scalable it is, but it at least gets you there with CSS in this one situation.

h1 {
position: relative;
}

h1:before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 10px;
  clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
  -webkit-clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
  background-color:  #34495e;
  border-radius: 0.12em;
}

h1:after {
  content: "";
  display: inline-block;
  position: absolute;
  left: .24em;
  top: .123em;
  
  width: 0.2em;
  height: 0.87em;
  background-color:  #34495e;
  border-radius: 0.12em;
  transform: rotate(-45deg);
  transform-origin: center;
}

<h1>Heading</h1>

Collectives™ on Stack Overflow

css rounded corner of right angled triangle

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related