Top/Right triangle with text in CSS

Question

First, I'm just starting out in HTML and CSS.

How I want to use this code: https://codepen.io/martinjkelly/pen/vEOBvL

.container {
  width: 250px;
  height: 250px;
  position:relative;
  background-color:grey;
}

.corner {
  width: 0; 
  height: 0; 
  border-top: 150px solid #ffcc00;
  border-bottom: 150px solid transparent;
  border-right: 150px solid transparent;
}

.corner span {
  position:absolute;
  top: 35px;
  width: 100px;
  left: 5px;
  text-align: center;
  font-size: 16px;
  font-family: arial;
  transform: rotate(-45deg);
  display:block;
}

<div class="container">
  <div class="corner"><span>20% Special Offer</span></div>
</div>

But I want to make the triangle at the top/right.

What I tried:

.corner {
  width: 0; 
  height: 0; 
  border-top: 150px solid transparent;
  border-bottom: 150px solid transparent;
  border-left: 150px solid transparent;
}

.corner span {
  position:absolute;
  top: 35px;
  width: 100px;
  left: 5px;
  text-align: center;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 14px;
  transform: rotate(45deg);
  display:block;
}

It works, but the text is not placed right...

Thanks so much for your help.

If you are going to ask a new question then delete your old one https://stackoverflow.com/questions/48996583/center-text-into-a-triangle-ribbon-with-css or edit that one and delete this one — Huangism, Feb 26 '18 at 21:07

score 7 · Accepted Answer · answered Feb 26 '18 at 21:06

You have to make some adjustments since the triangle will naturally align to the left, you can't just rotate it the other way, you also need to use absolute positioning so it lines up on the right. This also requires some adjustments to be made to the positioning of the text:

.container {
  width: 250px;
  height: 250px;
  position:relative;
  background-color:grey;
}

.corner {
  width: 0;
  height: 0;
  border-top: 150px solid #ffcc00;
  border-bottom: 150px solid transparent;
  border-left: 150px solid transparent;
  position:absolute;
  right:0;
}

.corner span {
  position:absolute;
  top: -110px;
  width: 100px;
  left: -100px;
  text-align: center;
  font-size: 16px;
  font-family: arial;
  transform: rotate(45deg);
  display:block;
}

<div class="container">
  <div class="corner"><span>20% Special Offer</span></div>
</div>

@jayweezy that's whole a different thing: https://stackoverflow.com/questions/14446677/how-to-make-3-corner-rounded-triangle-in-css — nullqube, Mar 22 '22 at 13:07

nullqube · Answer 2 · 2019-12-19T05:51:13.230

3

I suggest you read this too, It's all the shapes in css : https://www.css-tricks.com/examples/ShapesOfCSS/

without absolute positioning :

.container {
  width: 250px;
  height: 250px;
  position:relative;
  background-color:grey;
}

.corner {
  width: 0; 
 height: 0; 
 border-top: 150px solid #ffcc00;
 border-left: 150px solid transparent;
  right:0;
  margin-left:auto;
}

.corner span {
  position:absolute;
  top: 35px;
  width: 100px;
  right: 5px;
  text-align: center;
  font-size: 16px;
  font-family: arial;
  transform: rotate(45deg);
  display:block;
}

<div class="container">
  <div class="corner"><span>20% Special Offer</span></div>
</div>

edited Dec 19 '19 at 05:51

answered Feb 26 '18 at 21:08

nullqube

2,959
19
18

What is the benefit of not using absolute position in this case? BTW, it seems that you don't need the `border-bottom` in `.corner` to form a top-right triangle according the page you've shared. Not sure if it's updated. – Lacek Dec 19 '19 at 03:15
@Lacek u r right about bottom border. I generally try to avoid absolute in favor of being general, and then all the padding, margin can be in flow – nullqube Dec 19 '19 at 05:55
@nullqube how can I make the top right corner to be slightly rounded? – jayweezy Mar 22 '22 at 03:24

Top/Right triangle with text in CSS

2 Answers2