How to position and design triangle after text correctly

Question

I am trying to add a small triangle on the top-right corner after a text. My code looks like:

.amenity_note{
    margin-right:10px;
}
.amenity_note:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent #6eabff transparent transparent;
     /* top: 0px; */
    position: absolute;
}
.category_note:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent #6eabff transparent transparent;
     /* top: 0px; */
    position: absolute;
}

<div>
<ul>
  <li>
    <span class="category_note">Category Name</span>
      <ul>
    <li>
      <span class="amenity_note">First Name</span>
      <strong>$10</strong>
      <strong>[25]</strong>
    </li>
    <li>
      <span class="amenity_note">Last Name</span>
      <strong>$10</strong>
      <strong>[25]</strong>
    </li>
  </ul>
  </li>
</ul>

</div>

I have successfully placed the triangle to the top-right corner, however, I want it to make two following changes:

1. Place that triangle to little lower positions, so that it aligns with the text
2. Make triangle unfilled for the category as shown in the attached image.

Answer 1

It does not seem to require much complexity. I did it with a simple trick:

.amenity_note {
  margin-right: 10px;
  position: relative;
}

.amenity_note:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 0;
  border-color: transparent #6eabff transparent transparent;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.category_note {
  position: relative;
}

.category_note:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 0;
  border-color: transparent #6eabff transparent transparent;
  position: absolute;
  right: -15px;
  top: 5px;
}

.category_note:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 8px 0;
  border-color: transparent #ffffff transparent transparent;
  position: absolute;
  right: -14px;
  top: 6px;
  transform: scale(.7);
  transform-origin: top right;
  z-index: 1;
}

<div>
  <ul>
    <li>
      <span class="category_note">Category Name</span>
      <ul>
        <li>
          <span class="amenity_note">First Name</span>
          <strong>$10</strong>
          <strong>[25]</strong>
        </li>
        <li>
          <span class="amenity_note">Last Name</span>
          <strong>$10</strong>
          <strong>[25]</strong>
        </li>
      </ul>
    </li>
  </ul>

</div>

Answer 2

Hey there as goes allowing the two to follow the changes. You should use group selectors Also, I noticed you didn't have position: relative; So I added that for both classes.

Now you can move the position using top, left, right, bottom.

I used top in this cause.

.category_note,
.amenity_note {
  position: relative;
}

.amenity_note:after,
.category_note:after {
  top: 7px;
}

And as goes for the filled and not filled.? Did you consider using fontawesome to add these icons? it makes things easier.

I'm using Bootstrap icons since it's free. Also you should use this website to encode the SVG and use it in your CSS SVG encodr you should take the SVG code from the Bootstrap Icon and place it in the website and copy the ready for CSS code. Now the icon is background-image

.category_note,
.amenity_note {
  position: relative;
}

.amenity_note:after,
.category_note:after {
  top: 0px;
  transform: rotate(45deg);
}

.amenity_note {
  margin-right: 10px;
}

.amenity_note:after {
  content: "";
  width: 15px;
  height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-caret-up' fill='%236eabff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M3.204 11L8 5.519 12.796 11H3.204zm-.753-.659l4.796-5.48a1 1 0 0 1 1.506 0l4.796 5.48c.566.647.106 1.659-.753 1.659H3.204a1 1 0 0 1-.753-1.659z'/%3E%3C/svg%3E");
  position: absolute;
}

.category_note:after {
  content: "";
  width: 15px;
  height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-caret-up-fill' fill='%236eabff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3E%3C/svg%3E");
  position: absolute;
}

<div>
  <ul>
    <li>
      <span class="category_note">Category Name</span>
      <ul>
        <li>
          <span class="amenity_note">First Name</span>
          <strong>$10</strong>
          <strong>[25]</strong>
        </li>
        <li>
          <span class="amenity_note">Last Name</span>
          <strong>$10</strong>
          <strong>[25]</strong>
        </li>
      </ul>
    </li>
  </ul>

</div>

Note that you may want to change the color as anyone would want. In order to do that once you open the SVG file, you will have to find fill="currentColor" and now what you have to do is to replace the " currentColor" with the color you want.

The second step is to open the SVG encoder and post the new SVG so the color you choose to get encoded and be ready to be used in CSS.

you can also use other SVG or fontawesome icons. if you want.

Answer 3

Using borders to generate a triangle has some flaws, I used clip-path in this example, but you'd probably be better when using SVGs.

:root {
  --carretCategoryBgc: #fff;
  --carretAmenityBgc: #6eabff;
  --carretSize: 10px;
  --carretCategoryBorder: 1px;
}

.category_note,
.amenity_note {
  position: relative;
  padding-right: 14px;
}
.category_note::before, .category_note::after,
.amenity_note::before,
.amenity_note::after {
  content: "";
  position: absolute;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  overflow: hidden;
}
.category_note::before,
.amenity_note::before {
  z-index: -50;
}
.category_note::after,
.amenity_note::after {
  top: 0;
  right: 0;
  z-index: -100;
}

.category_note::before {
  top: var(--carretCategoryBorder);
  right: var(--carretCategoryBorder);
  height: calc(var(--carretSize) - (var(--carretCategoryBorder) * 2));
  width: calc(var(--carretSize) - (var(--carretCategoryBorder) * 2));
  background-color: var(--carretCategoryBgc);
}
.category_note::after {
  height: calc(var(--carretSize) + 1px);
  width: calc(var(--carretSize) + 1px);
  background-color: var(--carretAmenityBgc);
}

.amenity_note::before {
  top: 3px;
  right: 0;
  height: var(--carretSize);
  width: var(--carretSize);
  background-color: var(--carretAmenityBgc);
}

<ul>
  <li>
    <span class="category_note">Category Name</span>
      <ul>
    <li>
      <span class="amenity_note">First Name</span>
      <strong>$10</strong>
      <strong>[25]</strong>
    </li>
    <li>
      <span class="amenity_note">Last Name</span>
      <strong>$10</strong>
      <strong>[25]</strong>
    </li>
  </ul>
  </li>
</ul>