how do I add a triangle to the top right corner?

Question

I want to add a triangle on the top right corner of the child items, but how can I achieve the following CSS element? I did the following table in order to build a matrix, but I want to add the triangle in the same div

.column{
  float:left;
  margin:0 10px 0 0;
  width:120px;
}

.column .option{
  margin:10px 0 0 0;
  padding:10px;
  background:#22244a;
}

.column .option:first-child{
  background:#EBEDEE;
}

.column .option:after {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   width: 0; 
   height: 0; 
   display: block;
   border-left: 35px solid transparent;
   border-bottom: 35px solid transparent;
   border-top: 35px solid #0094bb;
   z-index:0;
}

<div class="column">
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
</div>

<div class="column">
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
</div>

<div class="column">
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
</div>

Gunther · Accepted Answer · 2021-02-19T16:03:54.557

Absolute positioned elements are positioned relative to the closest parent with the position property different from static, which is default.

Just changed this

.column .option {
  position: relative;
}

.column{
  float:left;
  margin:0 10px 0 0;
  width:120px;
}

.column .option{
  position: relative;
  margin:10px 0 0 0;
  padding:10px;
  background:#22244a;
}

.column .option:first-child{
  background:#EBEDEE;
}

.column .option:after {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   width: 0; 
   height: 0; 
   display: block;
   border-left: 35px solid transparent;
   border-bottom: 35px solid transparent;
   border-top: 35px solid #0094bb;
   z-index:0;
}

<div class="column">
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
</div>

<div class="column">
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
</div>

<div class="column">
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
  <div class="option">Some text here</div>
</div>

Edit: reference.

how do I add a triangle to the top right corner?

1 Answers1