CODEWITHSUNDEEP
htmlcss
user4393948
user4393948

Reputation:

Top/Right triangle with text in CSS

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.

Upvotes: 5

Views: 6676

Answers (2)

nullqube
nullqube

Reputation: 2999

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>

Upvotes: 3

APAD1
APAD1

Reputation: 13666

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>

Upvotes: 7

Related Questions