Can you show me a way to enclose div elements in brackets using CSS?

I have incorporated Vue and Vuetify into an RTL application. My goal is to create a layout like the one shown here:

https://i.sstatic.net/RTdrE.png

Essentially, I want two brackets surrounding some text and three buttons (each leading to different locations, although currently using the same button for simplicity).

This is what I have so far:

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

This is what I currently have implemented:

https://i.sstatic.net/TmVk4.png

I am struggling with the design of this template. How can I adjust the size of the brackets to always match the size of the text and buttons? Additionally, I am unsure why the left bracket appears on the opposite side (possibly due to RTL direction).

Answer №1

To create brackets, you can utilize the ::before and ::after pseudo-elements. The size of the brackets can be adjusted based on the screen size using media queries.

.container::before{
  content:"{";
  font-size:5rem;
}
.container::after{
  content:"}";
  font-size:5rem;
}
.content{
  display:inline-block;
}
.text{
  text-align: center;
}
  <div class="container">
    <div class="content">
      <div class="text">Text</div>
      <button>a</button>
      <button>b</button>
      <button>c</button>
      <div class="text">Hi</div>
    </div>
  </div>

Answer №2

If you're seeking an alternative to traditional text usage for brackets, perhaps consider implementing inline SVG instead:

.content {
  padding: 10px;
}
.brackets {
  display: flex;
}
.brackets::before, .brackets::after {
  content: '';
  width: 20px;
  background: url('data:image/svg+xml;base64,PD94bW...BACKGROUND IMAGE CODE TRUNCATED FOR BREVITY...A=</answer2>
<exanswer2><div class="answer" i="71844490" l="4.0" c="1649762966" v="1" a="UmFwaGFlbFA=" ai="10985297">
<p>An alternative method to utilizing plain text within brackets could involve incorporating inline SVG like so:</p>
<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>.content {
  padding: 10px;
}
.brackets {
  display: flex;
}
.brackets::before, .brackets::after {
  content: '';
  width: 20px;
  background: url('data:image/svg+xml;base64,PD94bW...BACKGROUND IMAGE CODE TRUNCATED FOR BREVITY...A=
<div class="brackets">
  <div class="content">
    <div>Hello</div>
    <button>Foo</button>
    <button>Bar</button>
    <button>Baz</button>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Reactstrap to design a customized vertical login page and NavBar with a unique background and text color scheme

I am currently working on creating a login page for accessing the main site that features a NavBar. I am utilizing ReactStrap, but I am facing challenges in making the NavBar vertical instead of horizontal, as well as customizing the background, text color ...

Activating hardware acceleration: utilizing translate3d

In a recent discussion by David Walsh, he mentions the potential for hardware acceleration through the use of the translate3d property in CSS. Here's how it operates: .animClass { -webkit-transform: translate3d(0, 0, 0); -webkit-backface-vis ...

How can I improve the smoothness of my CSS transition when resizing background images?

I'm currently working on creating an intro movie for a game and I thought it would be interesting to use CSS animations. However, I've noticed that some parts of the animation appear bumpy and inconsistent. It seems that depending on the transiti ...

Using Vue to Emit Events Without Passing Values

Hello there, I'm encountering an issue with the input toggle switch value in my Vue component. Whenever it is emitted to the parent component, the value seems to be flipped to its reverse. I am relatively new to Vue and have been experimenting with i ...

Creating two distinct SVG images without interfering with other div elements can be accomplished by properly structuring the HTML

I am working on a page layout that consists of three main sections. There is a top bar with buttons, a middle section that needs to load different pages using jQuery, and a bottom bar with additional buttons. On top of all this are floating windows that op ...

The functionality of the jQuery .click method appears to be malfunctioning within the Bootstrap

It seems like my JQuery.click event is not functioning as expected when paired with the corresponding button. Any ideas on what might be causing this issue? Here's the HTML CODE snippet: <button id="jan7" type="button" class="btn btn-dark btn-sm"& ...

Customize the appearance of the datepicker on the span element

Is it possible to apply a unique style to the datepicker located within a specific span element? Currently, selecting the text box copies the style with the red font applied to it. I am looking for a way to exclusively style the datepicker enclosed withi ...

The Navigation Bar in Vue Component Renders Incorrectly due to Bootstrap Integration

I am facing an issue with my Bootstrap navbar not displaying correctly within my Vue component. It is appearing as a stacked greyed out button, almost like it's assuming it's on a small device. https://i.sstatic.net/yoPvO.png You can find the c ...

Looking for assistance in creating a stunning portfolio showcase?

As I work on building my portfolio webpage, I've realized that with my limited knowledge of HTML/CSS, creating a great gallery might be challenging. In search of an efficient solution, I ventured across the web but couldn't find anything that ful ...

Utilizing Vue 2 and Axios to toggle visibility of a div based on the response of an Axios request

I have a div on my website <div class="ui-alert" v-show="isCaptchaError"> ... </div> The variable isCaptchaError is initialized in my Vue instance: const form = new Vue({ el: '#main-form', data: { ...

Activate hover effect on toggle button

When I hover over the "CHANGE" button, the orange color appears as expected. Clicking the button once turns the color red but removes the hover color, which is fine. However, clicking it twice brings back the original blue color but the hover effect is m ...

Error encountered during the construction of the dojo due to a CSS syntax

I am currently using version 1.9.3 of dojo, and I have encountered an issue with the css file when trying to build dojo using build.bat. The code in my css file is as follows: @import url("TimeDriverCommon.css"); @import url("DialogCommon.css"); @import ...

Looking for a quicker loading time? Opt for a shortened version of CSS

Most of the images on my website are optimized using sprite sheets, where multiple images are combined into one file to enhance user experience. This method reduces the number of server requests for individual images. However, I'm facing an issue whe ...

Adjust the background color of the unordered list when it corresponds to the current

Looking to customize a course calendar so that the day column stands out on its designated day of the week. For example, on Wednesday, the Wednesday column should have a distinct appearance. I've been experimenting with different methods and searchi ...

What is the best way to align a div in the middle of an input-group div?

When dealing with a nested div, where the parent div is styled with an input-group class, my goal is to have the nested div centered within the available line or on the next free line space. This is the desired layout I want to achieve regardless of the n ...

What is the best way to segregate Express routes from server.js?

I've been closely following a Vue SSR guide on GitHub and noticed that the author has organized their Express routes within a file named server.js. For better organization, I prefer to keep my Express routes in a file called router.express.js located ...

Losing access to the $store object when using vuex store with npm-link in a Vue-cli 3 project

It seems like there may be a configuration issue related to storing data in an npm-linked directory. I created a vue-cli 3 project and successfully ran the "counter" example (from https://github.com/vuejs/vuex/tree/dev/examples/counter) Functioning: Afte ...

The HTML tags within the title of a JQuery UI Dialog modal are failing to display properly

I am currently implementing a modal in my application. However, I am facing an issue where the modal title is displaying html tags instead of rendering them properly. https://i.sstatic.net/nUXPt.png Upon inspection, it seems that the dialog title is not b ...

CSS search bar with sharp corners and radius ignored

I am currently developing an Android application using Angular NativeScript, and I'm aiming to implement a search bar with rounded corners. My HTML code looks like this: <SearchBar class="search"></SearchBar> In my CSS file, I h ...

Setting up multiple environments in CypressJs can be easily achieved by following these steps

I've been struggling to correctly set up my CypressJS environments for testing. Any assistance would be greatly appreciated. Within my index.html file, I have a CONFIG object in the <script> section. In production, this object is added by the M ...