What are some ways I can decrease the background width and shrink the div width?

I am hoping to maintain the current box size and borders, but I want to add a touch of color. Specifically, I would like to have a red line running through the center of the box without coloring the entire background. Although I know one way to achieve this is by creating an additional div element, I'm interested in finding a solution that uses just one element for both purposes. Is this feasible?


  background-color: red;
  position: absolute;
  margin: 120px 30px 0px 30px;

  height: 140px;
  width: 400px;
  border: 0.2rem rgba(172, 255, 47, 0.565) solid;

Here is how it currently appears: https://i.sstatic.net/dDaPA.png. Instead of completely coloring the box red, I would prefer to keep the same dimensions and borders, with only a red line in the center. Is there a way to accomplish this?

cssreactjssassjsx

Answer №1

By utilizing a CSS pseudo element, I successfully inserted a vibrant red box and then employed the transform property in CSS to accurately position the box at the center. Could you kindly review this solution to ensure it aligns with your specifications?

.container {
  position: absolute;
  margin: 120px 30px 0px 30px;
  height: 140px;
  width: 400px;
  border: 0.2rem rgba(172, 255, 47, 0.565) solid;
}

.container::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  position: relative;
  transform: translate(200px, 70px);
  background-color: red;
}
<div class="container"></div>

Answer №2

To achieve a red line in the middle of an absolutely positioned box without adding any extra html markup, you can utilize a background image with a linear gradient.

.box {
border: 0.2rem rgba(172, 255, 47, 0.565) solid;
height: 140px;
/*margin: 120px 30px 0px 30px; this isn't necessary for the demo*/
position: absolute;
width: 400px;

background-image: linear-gradient(red, red);
background-repeat: no-repeat;
background-position-y: center;
background-size: 100% 5px;
}
<div class="box"></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

Header, footer, and sidebars are all locked in place, while the central content area is designed for

Using this Demo Template as a starting point, I am looking to create a new layout: However, I am encountering the following challenges: The two sidebars are not properly contained within the scrollable content div. The content div does not have a fixed ...

htmlcss

What is hindering the responsiveness of this HTML table?

I recently designed a schedule table that resizes properly in the browser, but when I tried to access it on my mobile phone, it didn't resize correctly. On my phone screen, half of Thursday was cut off due to the horizontal scroll. https://i.sstatic. ...

htmlcsshtml-table

deployJava.js injects a new <embed> element into the header section of the webpage

I've ran into an issue with the Java applets on my website. I included the deployJava.js load tag in the head section of the page, but when I look at the resulting HTML in Chrome debugger, this script seems to be breaking my head content and starting ...

javajavascripthtmlcssdeployjava

Animate an image to the right when clicked, then return it to the left with a second click

Seeking help with animating a set of images to move individually 300px right on first click, and then 300px left when clicked again. I'm currently facing an issue where my code is not working. It could be due to A) syntax errors or B) the images not ...

javascriptjqueryhtmlcssjquery-animate

Tips for increasing the width of a button within an HTML table heading

I'm attempting to make a button within a table <th> expand to the full width and height of the header column, even if a table cell in the same column is larger than the text. If I set the width to 100% in CSS, the button ends up matching the siz ...

htmlcss

Employing negative margin to connect div1 to the left side of div2

Is there a way to attach a dismiss button to the left of a contact in a sidebar? I am trying to achieve a layout similar to the one shown in this image: I attempted using margin-left: -50px; or left: -50px;, but the dismiss div seems to disappear. Even th ...

htmlcssmargin

Establish a predetermined selection for a radio button and its associated checkbox option

I am working on a React material UI group input field that is mapping a dataset. The result consists of one radio button and one checkbox performing the same action. Initially, I attempted to set the state to establish one data item as default. While I fol ...

javascriptreactjsmaterial-ui

Margin not being applied to last element in parent - any ideas why?

Why does the margin of the last element, whether it is a <p> or <h1>, not have any impact? It should be pushing the background of the parent container downwards. .container { background: grey; } h1 { margin-bottom: 3em } p { margin- ...

htmlcss

A method for expanding the menu upwards to make room for newly added items

Looking at the images below, I have a menu that needs new items added to it while maintaining the position of the lower-left corner. Essentially, each time an entry is added, the menu should expand upwards from "the upper-left corner" while keepi ...

javascripthtmlcssangularjsangular

What is the process for importing a React application from GitHub as a component into a new React application?

Is it possible to import a React app from my GitHub account and use it as a component in a new React project? Imagine I have developed a React app called NavBar and published it on GitHub. Now, how can I bring this NavBar into the header component of a di ...

reactjsgithubnpmyarnpkg

Having trouble centering buttons inside a box with React Mui framework

Struggling to center the side buttons vertically on an image carousel in my React project. I've tried using alignContent:"center" and justifyContent:"center" in a flexbox, but the buttons won't move. The images are centered fine though. Any help ...

reactjsflexboxmaterial-uialignmentvertical-alignment

Using async/await in React.js to handle API calls results in a

It's puzzling to me why calling the API directly using async await in useEffect() results in getting data immediately when the component mounts, but when I call getLevels() from selectApi.js, it returns undefined. Take a look at the code snippet below ...

node.jsreactjsmongodbexpressmaterial-ui

Looking for guidance on integrating a ref type prop with material-ui components such as Popover? Exploring the usage of the 'action' prop for updating position in the components

Issue: I am facing a challenge with implementing the Popover component from @material-ui/core library. My goal is to manually resize the popover by utilizing one of the props provided. Link to documentation The problem arises when trying to understand the ...

reactjsmaterial-ui

If you click outside of a Div element, the Div element will close

I am looking for a way to implement a function that will hide a specific div when I click outside of its area. The div is initially set to Position: none and can be made visible using the following function: Div Element: <div id="TopBarBoxInfo1" oncli ...

javascriptjquerycsshtml

Does anyone know if there is a way to use JavaScript to implement LESS in CSS files

Is there a way to perform variable substitution, especially in CSS using JavaScript? I am looking for a solution that offers more features than just variable substitution, such as the LESS syntax. Has anyone come across a JavaScript implementation of LES ...

javascriptcssless

Guide to utilizing Nginx for serving pages using an express router

Currently, I am in the process of creating a full-stack application with a node.js/mysql backend, react frontend, and utilizing the express router. However, I am encountering difficulties when attempting to set up a local development server. My main requir ...

node.jsreactjsexpressnginx

tips for styling a nested react component

When applying a different background color to a nested component within a parent component on a specific page, the styles may not be working as expected. This issue is often encountered when using LESS and importing styles from a module file (styles.modu ...

reactjs

Unique CSS design with an accentuated border

I was experimenting with creating a corner using CSS and managed to achieve something like this: .left-corner { width: 0; height: 0; border-top: 100px solid powderblue; border-left: 100px solid transparent; } <div class="left-corner"></ ...

htmlcsscss-shapes

Are there alternative methods to send parameters back to the previous screen in react navigation without relying on onPress or onClick Events?

Currently working on a React Native Project where I'm utilizing react navigation for screen transitions. Using Navigator.navigate('Settings',params) on a onPress event to move from 'Home' to 'Settings' screen works smooth ...

reactjsreact-nativereact-reduxexporeact-navigation

Troubleshooting with matTootip on Safari: Tips for avoiding input-text blockage

I am currently using the matTooltip feature from Angular Material for an input field. However, on Safari, the input field appears to be overlapping, making it impossible to type in. Despite my attempts to change the position of the toolTip, the issue pers ...

cssangularangular-material