CODEWITHSUNDEEP
htmlcss
SBB
SBB

Reputation: 8990

CSS Triangle bottom right of parent div

I have a parent div that contains a child that is aligned to the bottom right corner of the parent. The child has text within it that I am trying to get to display correctly.

As it is currently set up, the contents of the child has placed the text to the right side instead of within.

CSS: 

.container {
  background-color: red;
  height: 200px;
  width: 400px;
  position:relative;
}  

.gradeTriangle{
    width: 0px;
    height:0px;
    border-bottom: 50px solid #000;
    border-left: 50px solid transparent;
    bottom: 0;
    right: 0;
    position: absolute;
    color: green
}

HTML:

<div class="container">
  <div class="gradeTriangle">
    $25
  </div>
</div>

Fiddle: http://jsfiddle.net/vh7m8gey/1/

Output: enter image description here

I am trying to get the $25 to be centered in the black triangle that is on the bottom right of the child.

How should i approach this?

Upvotes: 1

Views: 4108

Answers (4)

Balaji731
Balaji731

Reputation: 1129

Need to add some style to get the design, added the following style for gradeTriangle 

.gradeTriangle{ 
position:absolute;
right:0; 
bottom:0;
width: 60px; 
height: 60px;
border-bottom: solid 30px black;
border-right: solid 30px black; 
box-sizing: border-box; 
color:#fff;
border-left: solid 30px transparent; 
border-top: solid 30px transparent;
}

please check the sample code.

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 274236

You can easily create the triangle as background of the main container:

.container {
  background: 
    linear-gradient(to bottom right,transparent 49.8%,#000 50%) bottom right/50px 50px no-repeat,
    red;
  height: 200px;
  width: 400px;
  position: relative;
}

.gradeTriangle {
  bottom: 5px;
  right: 5px;
  position: absolute;
  color: green
}
<div class="container">
  <div class="gradeTriangle">
    $25
  </div>
</div>

Upvotes: 0

Jonny
Jonny

Reputation: 1329

I created a container for the amount with absolute position right 3px and bottom -45px.

.container {
  background-color: red;
  height: 200px;
  width: 400px;
  position:relative;
}  

.gradeTriangle{
    width: 0px;
    height:0px;
    border-bottom: 50px solid #000;
    border-left: 50px solid transparent;
    bottom: 0;
    right: 0;
    position: absolute;
    color: green
    }
.amountContainer{
    position:absolute;
    padding:1%;
    bottom:-45px;
    right:3px;
}
<div class="container">
  <div class="gradeTriangle">
    <div class="amountContainer">$25</div>
  </div>
</div>

Upvotes: 3

Grzegorz Miśkiewicz
Grzegorz Miśkiewicz

Reputation: 426

Look at this. You need to insert for example span inside gradeTriangle, and position It using css.

.gradeTriangle span {
    position: absolute;
    bottom: -40px;
    right: 0px;
}

HTML:

<div class="container">
  <div class="gradeTriangle">
    <span>$25</span>
  </div>
</div>

Upvotes: 0

Related Questions