# Haciendo que las etiquetas parezcan etiquetas del mundo real

**URL:** <https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237>\
**Category:** UX\
**Created:** [23 Octubre, 2018 07:40 UTC](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237 "2018-10-23T07:40:38Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![rootsh3ll](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rootsh3ll/32/119507_2.png) [@rootsh3ll](https://meta.discourse.org/u/rootsh3ll)\
**Post date:** [23 Octubre, 2018 19:09 UTC](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237/6 "2018-10-23T19:09:12Z")

</div>

> [@terraboss](#):
>
> - … on my iPhone 8+, all of the tags have a thin line on the right next to the flap.
> - … on my iPad mini 4, only some thin lines will appear on the right next to the flap. (e.g. tags with 2 characters)
> - … on my Mac everything is just fine

That’s exactly my issue. In some lines with 2 tags, I see a flap on my iOS device, both safari and chrome. But seems to work fine on on MacOS.

Apart from that, can you change the direction of the triangle in the Tag, like this: ![18%20PM](https://global.discourse-cdn.com/meta/original/3X/7/a/7a15a98b9a1a29027c3d2485b8ad4e6c15348476.png) I tried my beginner CSS skills but couldn’t achieve that. Can you help me out with that?

I changed color of my code to Red (my theme color) and it looks awesome as yours 🙂  
But using colours on tags drives focus on tags constantly rather than the titles which are more important. So I’d still keep the tags in kind of background and content in front.

Here is what it looks like: ![24%20AM](https://global.discourse-cdn.com/meta/original/3X/f/9/f95dcee49b0aa49b99976eb9bf78b7bb1b4404e6.png)  
Just in case somebody else want a red tag on black theme. here is my CSS code for that:

> **CSS for Red Tag on Black Background**
>
> .discourse-tag.box {  
> position: relative;  
> display: inline-block;  
> text-decoration: none;  
> font-weight: normal;  
> background-color: #9c0c16 !important;  
> border-radius: 3px 0 0 3px;  
> height: 20px;  
> line-height: 20px;  
> padding: 0 13px 0 21px;  
> margin: 0 10px 0 0;  
> }  
> .discourse-tag.box::before {  
> position: absolute;  
> content: ‘’;  
> background: #000;  
> border-radius: 100%;  
> height: 6px;  
> left: 7px;  
> width: 6px;  
> top: 7px;  
> box-shadow: inset 0 1px rgba(0,0,0,0.25);  
> }  
> .discourse-tags .discourse-tag.box::after {  
> position: absolute;  
> content: ‘’;  
> background: #000;  
> border-bottom: 11px solid transparent;  
> border-left: 10px solid #9c0c16;  
> border-top: 10px solid transparent;  
> right: 0;  
> top: 0;
> 
> }  
> a.discourse-tag.box {  
> color: #fff !important;  
> font-weight: bold;  
> }

---

_[View the full topic](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237)._