how to position a triangle created with css?

Question

how to position a triangle created with css?

Navigation

#1 by (4 votes)

2

How can I position a div that creates a triangle next to an item in my menu?

<div class="triangulo">
</div>

.triangulo{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 17.5px 30.3px 17.5px 0;
    border-color: transparent gray transparent transparent;
}

I need to position it next to the dashboard icon.

<div class="sidenavprincipal z-depth-1">
    <div id="avatar"></div>

    <div id="containerIconesLateral" class="container">

        <div class="row">

                <div class="col-12 alinhaColuna">
                    <svg class="svgIconeMenu" style="width:40px;height:40px" viewBox="0 0 24 24">
                        <path fill="rgb(161,196,66)" d="M19,5V7H15V5H19M9,5V11H5V5H9M19,13V19H15V13H19M9,17V19H5V17H9M21,3H13V9H21V3M11,3H3V13H11V3M21,11H13V21H21V11M11,15H3V21H11V15Z" />
                    </svg>
                </div>

                <div class="col-12">
                    <span class="tipografiaDescricaoIcone">Dashboard</span>
                </div>

        </div>

I managed to position as absolute position and using margin until arriving at my destination, but I believe that this is not the correct way to do it.

html css

asked by anonymous 07.12.2018 / 13:25

1 answer

Select Inner Join from what is not on the other table Only pop up 1x every 24h per user

score 4 · Accepted Answer

Do the following:

1-) In HTML markup, place <div class="triangulo"></div> shortly after tag SVG , as shown below:

<div class="col-12 alinhaColuna">
   <svg class="svgIconeMenu" style="width:40px;height:40px" viewBox="0 0 24 24">
     <path fill="rgb(161,196,66)" d="M19,5V7H15V5H19M9,5V11H5V5H9M19,13V19H15V13H19M9... />
   </svg>
   <div class="triangulo"></div>
</div>

2-) Change the CSS rule to:

.triangulo{
  display:inline-block;
  margin-bottom: 2px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 18px 30px 18px 0;
  border-color: transparent gray transparent transparent;
}

Note: If you set </svg> you will not need the border-width: 20px 30px 20px 0; statement, because your margin-bottom: 2px; has height SVG and the triangle will have the same height as 40px , automatically vertically.