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, Mar 01 '19 at 17:34
That's my backup plan. But, it would be great if I could just get it done in CSS. — mindlessgreen, Mar 01 '19 at 17:34
Possible duplicate of [How to make 3-corner-rounded triangle in CSS](https://stackoverflow.com/questions/14446677/how-to-make-3-corner-rounded-triangle-in-css) — Anurag Srivastava, Mar 01 '19 at 17:46

score 2 · Accepted Answer · edited Mar 01 '19 at 21:40

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>

score 1 · Answer 2 · answered Mar 01 '19 at 17:30

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 01 '19 at 17:30

Gabriele Petrioli

191,379
34
261
317

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. – mindlessgreen Mar 01 '19 at 17:32
@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. – Gabriele Petrioli Mar 01 '19 at 17:49

Toms Code · Answer 3 · 2019-03-01T17:38:51.450

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 01 '19 at 17:38

answered Mar 01 '19 at 17:31

Toms Code

1,439
3
15
34

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. – mindlessgreen Mar 01 '19 at 17:41
Ah I understand, I think I would go down the SVG route in that case – Toms Code Mar 01 '19 at 18:04

score 0 · Answer 4 · answered Mar 01 '19 at 18:01

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>

css rounded corner of right angled triangle

4 Answers4