Position text or triangle in the top-right angle side within a div

Question

I want to position a text or a css triangle in the top-right angle of this div that also has an image inside positioned on the center. The problem is that when I try to position the css triangle I cannot position them well if it's relative. And if I set as absolute then for some reason it doesn't work properly.

.item {
  background-color: #ffffff;
  border: 1px solid rgba(153, 153, 153, 0.3);
  color: #363636;
  display: flex;
  flex-direction: column;
  font-size: 20px;
  font-weight: 400;
  margin-top: 34px;
  width: calc(33% - 15px);
  text-align: center;
}

<div class="item">
  <img src="img.png" width="50" height="50">
  <!--Here the css div triangle or the text-->
</div>
<header> Some text</header>
</div>

Does this answer your question? [How to position text over an image in css](https://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css) — Awais, Dec 31 '19 at 09:56

score 1 · Accepted Answer · answered Dec 31 '19 at 10:03

Here is one method, using your code. I put the triangle in a span, then positioned it within the DIV.

.item {
  position: relative;
  background-color: #ffffff;
  border: 1px solid rgba(153, 153, 153, 0.3);
  color: #363636;
  display: flex;
  flex-direction: column;
  font-size: 20px;
  font-weight: 400;
  margin-top: 34px;
  width: calc(33% - 15px);
  text-align: center;
}

#triangleSpan {
  position: absolute;
  top: 0;
  right: 0;
}

<div class="item">
  <img src="img.png" width="50" height="50">
  <!--Here the css div triangle or the text-->
  <span id="triangleSpan">▲</span>
</div>
<header> Some text</header>
</div>

score 1 · Answer 2 · answered Dec 31 '19 at 10:11

You have to use position: relative in outer <div> and then for your text or triangle use position: absolute;

.item {
   position: relative;
   display: flex;
}
.mytext{
    position: absolute;
    top:10px;
    right: 20px;
    color: white;
}

<div class="item">
  <img src="https://images.pexels.com/photos/1254140/pexels-photo-1254140.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="100%">
  <!--Here the css div triangle or the text-->
  <h2 class="mytext">hola mundo</h2>
</div>

</div>

Position text or triangle in the top-right angle side within a div

2 Answers2