CODEWITHSUNDEEP
cssshapes
Gregor
Gregor

Reputation: 11

CSS triangle with rounded border (not corners)

I am having an A-Tag where i have the triangle in the after selector. I need to have a concave border radius on the long side of the triangle and i also need a shadow on the triangle.

Kinda like Drawing a triangle with rounded bottom in CSS? but i can't use the before selector, because it is already in use.

My code so far:

a {
  background-color: #ffffff;
  position: relative;
  width: 100px;
  height: 100px;
  display: inline-block;
}

a:after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 0 0 100px;
  border-color: transparent transparent transparent #000000;
}
<a href="#">my link</a>

Upvotes: 1

Views: 506

Answers (1)

Paulie_D
Paulie_D

Reputation: 115046

I need to have a concave border radius on the long side of the triangle and i also need a shadow on the triangle.

Use a radial gradient and a drop-shadow filter.

a {
  background-color: #ffffff;
  position: relative;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 1em;
}

a:after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 70%, black 70%);
  filter: drop-shadow(6px -6px 2px green)
}
<a href="#">my link</a>

Upvotes: 1

Related Questions