1

enter image description here

I am trying to achieve the top right triangle as in the picture shows but when I apply border radius why does it apply borders to all side as I specified only one side radius. Although I applied border-top-right-radius: 5px; instead of border-radius: 0px 5px 0px 0px; I get the same result. Any Help?

HTML:

<div class="pricing-head">
  <h3>Rainmarker</h3>
  <span>For up to 10 users</span>
  <div class="ribon"></div>
</div>

CSS:

.pricing-head {
    background-color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 20px;
}
.pricing-head .ribon {
    position: absolute;
    top: 0;
    right: 0;
    width: 75px;
    height: 75px;
}
.pricing-head .ribon:before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    border-bottom: 70px solid transparent;
    border-left: 70px solid transparent;
    border-right: 70px solid #ffad6a;
    border-radius: 0 5px 0 0;
}
1
  • What picture? Are you supposed to be linking to an image showing what you want? Feb 5, 2016 at 16:10

2 Answers 2

1

For a rounded top-right border, do:

-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;

Generator: http://border-radius.com/

To get a top-right triangle, do:

width: 0;
height: 0;
border-style: solid;
border-width: 0 200px 200px 0;
border-color: transparent #009999 transparent transparent;

Generator: http://triangle.designyourcode.io/

To get both the top-right corner triangle and top-right rounded border radius, use a container to the corner with border-radius and overflow:hidden.

.container {
  position: relative;
  width: 300px;
  height: 100px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  overflow: hidden;
  border: 1px solid gray;
}

.corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 100px 0;
  border-color: transparent #009999 transparent transparent;
}

.content {
  font-family: "Verdana";
  font-size: 12pt;
  text-align: center;
  height: 100px;
  line-height: 100px;
}
<div class="container">
  <div class="corner"></div>
  <div class="content">
    Rainmarker
  </div>
</div>

OUTPUT

Corner triangle with border radius

4
  • You missed my question......Although I applied border-top-right-radius: 5px; instead of border-radius: 0px 5px 0px 0px; but the same result.
    – Kcoitk
    Feb 5, 2016 at 16:12
  • @Kcoitk: I don't see border-top-right-radius in your question.
    – SNag
    Feb 5, 2016 at 16:15
  • @Kcoitk: Ah, saw it now. I was looking in your code!
    – SNag
    Feb 5, 2016 at 16:17
  • .container is set to overflow: hidden; but it works. Thanks
    – Kcoitk
    Feb 5, 2016 at 16:46
1

Heres a pen showing what you want: http://codepen.io/anon/pen/VeEKLP

You needed :

border-style: solid;
border-width: 0 200px 200px 0;
border-color: transparent #007bff transparent transparent;

Heres a good resource for making css triangles: http://apps.eky.hk/css-triangle-generator/

7
  • sir, I need 5px radius support at top right of the triangle. In the codepen I don't see the top right radius, only triangle
    – Kcoitk
    Feb 5, 2016 at 16:19
  • Well add it then: top:5px; right:5px; as you are positioning absolutely. Feb 5, 2016 at 16:20
  • codepen.io/anon/pen/OMBRXv it applies but give it a round box instead of a triangle
    – Kcoitk
    Feb 5, 2016 at 16:23
  • but it's not making top right radius...... it is shifting 5px inside from top right. that's not I am looking, I just need the top right portion radius keeping the triangle
    – Kcoitk
    Feb 5, 2016 at 16:29
  • Ah ok i think i see what you mean. Maybe look at this previous question. Its pretty complicated but should solve it for you: stackoverflow.com/questions/14446677/… Feb 5, 2016 at 16:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.