CODEWITHSUNDEEP
csscss-shapes
mindlessgreen
mindlessgreen

Reputation: 12112

css rounded corner of right angled triangle

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:

enter image description here

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.

Upvotes: 0

Views: 3119

Answers (4)

Temani Afif
Temani Afif

Reputation: 272909

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>

Upvotes: 2

Scrimothy
Scrimothy

Reputation: 2536

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>

Upvotes: 0

Toms Code
Toms Code

Reputation: 1689

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.

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

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>

Upvotes: 1

Related Questions