How to wrap divs with brackets using CSS?-CodePudding

I'm using Vue and Vuetify in an RTL app. I'm trying to create the following layout:

Basically you have two brackets that wrap a text and three buttons (each leads to different locations but currently I used the same button for simplicity).

What I currently got:

<template>
  <v-dialog
    v-model="showModal"
    @click:outside="handleClose"
    outlined
    width="750"
  >
    <v-card>
      <div>
        <div style="float: left; width: 33%;">{</div>
        <div style="float: left; width: 34%;">
          <p>TEXT</p>
          <div>
            <v-btn fab dark target="_blank" rel="noopener">
              <v-icon>mdi-hand-heart-outline</v-icon>
            </v-btn>
            <v-btn fab dark :target="_blank" rel="noopener">
              <v-icon>mdi-linkedin</v-icon>
            </v-btn>
            <v-btn fab dark target="_blank" rel="noopener">
              <v-icon>mdi-github</v-icon>
            </v-btn>
          </div>
        </div>
        <div style="float: left; width: 33%;">}</div>
        <br style="clear: left;" />
      </div>
    </v-card>
  </v-dialog>
</template>

What I got:

Having trouble designing this template. How can I make the brackets bigger with a fixed size that always matches the size of the text and the buttons? Also, not sure why, he left bracket looks to the other side (guessing due to RTL).

CodePudding user response：

You can use ::before and ::after for the brackets. I'm not sure about the size of the brackets but you can adjust them depending of the screen size with media queries.

.container::before{
  content:"{";
  font-size:5rem;
}
.container::after{
  content:"}";
  font-size:5rem;
}
.content{
  display:inline-block;
}
.text{
  text-align: center;
}

  <div >
    <div >
      <div >Text</div>
      <button>a</button>
      <button>c</button>
      <button>b</button>
      <div >Hi</div>
    </div>
  </div>

CodePudding user response：

An alternative to using plain text for the brackets could be an inline svg as so:

.content {
  padding: 10px;
}
.brackets {
  display: flex;
}
.brackets::before, .brackets::after {
  content: '';
  width: 20px;
  background: url('data:image/svg xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMzIiIGhlaWdodD0iNjQiPgo8cGF0aCBkPSJtIDMxLDU4LjI3NjI0MSB2IDQuNzIzNzgxIGggLTIuMzUxNDU0IHEgLTkuNDQzNzQyLDAgLTEyLjY2NzUwOSwtMi40Mjc1MTggLTMuMTg1ODQxLC0yLjQyNzUxNyAtMy4xODU4NDEsLTkuNjc3MjI2IHYgLTcuODQwMjE1IHEgMCwtNC45NTM0NDUgLTIuMDQ4MDQxLC02Ljg1NjEwMiBRIDguNjk5MTE0OSwzNC4yOTYzMDQgMy4zMTM1MjcyLDM0LjI5NjMwNCBIIDEgdiAtNC42OTA5NzcgaCAyLjMxMzUyNzIgcSA1LjQyMzUxNDMsMCA3LjQzMzYyNzgsLTEuODY5ODUzIDIuMDQ4MDQxLC0xLjkwMjY1NiAyLjA0ODA0MSwtNi43OTA0OTQgdiAtNy44NzMwMTkgcSAwLC03LjI0OTcwOTEgMy4xODU4NDEsLTkuNjQ0NDIyMyAzLjIyMzc2NywtMi40Mjc1MTcxIDEyLjY2NzUwOSwtMi40Mjc1MTcxIEggMzEgdiA0LjY5MTAxNTMgaCAtMi41NzkwMTQgcSAtNS4zNDc2NjEsMCAtNi45Nzg1MDksMS40NDMzNjU3IC0xLjYzMDg0NiwxLjQ0MzQwNCAtMS42MzA4NDYsNi4wNjg3NzM0IHYgOC4xMzU0NDkgcSAwLDUuMTUwMjY4IC0xLjc0NDYyOCw3LjQ3OTM3NCAtMS43MDY3LDIuMzI5MTA1IC01Ljg3ODYzNCwzLjE0OTIzOCA0LjIwOTg2MSwwLjg4NTcwMiA1LjkxNjU2MSwzLjIxNDgwNyAxLjcwNjcwMSwyLjMyOTEwNiAxLjcwNjcwMSw3LjQ0NjU3IHYgOC4xMzU0NDkgcSAwLDQuNjI1MzcgMS42MzA4NDYsNi4wNjg3NzQgMS42MzA4NDgsMS40NDM0MDQgNi45Nzg1MDksMS40NDM0MDQgeiIKc3R5bGU9ImZpbGw6YmxhY2s7c3Ryb2tlOm5vbmUiLz4KPC9zdmc ');
  background-size: 100% 100%;
}
.brackets::after {
  transform: scaleX(-1);
}

<div >
  <div >
    <div>Hello</div>
    <button>Foo</button>
    <button>Bar</button>
    <button>Baz</button>
  </div>
</div>