-2

I try to make corner triangle with after and before using border-radius. But can't make it correctly.

enter image description here

web-tiki
  • 99,765
  • 32
  • 217
  • 249
user3585456
  • 1
  • 2
  • A simple request on Google could give you multiple solutions. – scoolnico Oct 24 '15 at 10:15
  • Please show us what you have tried (HTML and CSS) – web-tiki Oct 24 '15 at 10:24
  • 1
    I've closed it as a dupe because even though the slant is on a different side in the linked answer (and border-radii are smaller), the approaches would be the same. Try using the methods mentioned there and if you get stuck, [edit] in your code into the question. – Harry Oct 24 '15 at 10:31

1 Answers1

0

the after css would be,

:after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 30px solid hsla(34,85%,35%,1);
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 100%;
    z-index: 2;
}

this was a part of triangle shaped breadcrumps, which you can see in the link below

CSS Triangle Breadcrumbs

Athi Krishnan
  • 159
  • 5