how to position a triangle created with css?

Asked

Viewed 135 times

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 him 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>

Resultado esperado

I managed to put as position Absolute and using margin to reach my destination, but I believe that this is not the correct way to do.

html css
  • 1

    Dude you’re using Bootstrap?? Which version?

  • material design bootstrap, latest version

  • I tried it this way: #colDash::BEFORE { content: "." ; width: 0; margin: -30%; height: 0; border-style: Solid; border-width: 17.5px 30.3px 17.5px 0; border-color: Transparent #026FBD Transparent Transparent; z-index: 9; position: Absolute; margin-left: 62%; }

1 answer

4


Do the following:

1-) In the HTML markup put the <div class="triangulo"></div> shortly after the tag closing of SVG </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 define border-width: 20px 30px 20px 0; you won’t need the statement margin-bottom: 2px;, that’s because his SVG is tall 40px and the triangle will have the same height as the SVG, automatically aligning vertically.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.