Mix div borders with varying border radius for child elements

I'm currently working on a project that involves creating border lines between divs to achieve a design similar to the one shown in this design jpeg.

However, I've only managed to reach an output jpeg where the merging is not quite right.

The CSS code snippet looks like this:

export const Container = styled.div`
    &:nth-child(even){
        justify-content: right;
        flex-direction: row-reverse;
        text-align: right;
        border-right: 3px solid rgba(255, 255, 255, 0.12);
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
        position: relative;

    }
    &:nth-child(odd){
        border: 3px solid rgba(255, 255, 255, 0.12);
        border-radius: 30px  30px;
        border-right: none;
    }`

And here's how it appears in React-HTML:

<Container>
 {N.map((elementInArray, index) => (
        <Bunch key={index}>
            <Box className={'box'+elementInArray}>
                <InnerBox/>
            </Box>
            <TextBox2 className={'textbox'+elementInArray}>
                <Heading1>{year}</Heading1>
                <Heading3>{'Q' + elementInArray}</Heading3>
                <Para>{text}</Para>
            </TextBox2>
        </Bunch>
    )
    )}
</Container>

cssreactjsresponsive-designstyled-componentsborder-radius

Answer №1

Creating a Stylish Web Layout using HTML and CSS

    body {
        background-color: #080e10;
    }

    main {
        padding: 0 60px;
        margin: 100px 0;
        position: relative;
    }

    .container {
        min-height: 200px;
        position: relative;
        top: -6px;
    }

    .container:nth-child(odd) {
        border: 3px solid #121f28;
        border-left: none;
        border-radius: 0 20px 20px 0;
        width: calc(100% - 20px);
        margin-left: auto;
        margin-bottom: -6px;
    }

    .container:nth-child(even) {
        border: 3px solid #121f28;
        border-right: none;
        border-radius: 20px 0 0 20px;
        width: calc(100% - 20px);
        margin-right: auto;
        top: -3px;
    }

    main::before {
        content: '';
        position: absolute;
        border: 3px solid #121f28;
        border-top: none;
        border-right: none;
        border-radius: 0 0 0 20px;
        width: calc(100% - 140px);
        margin-left: auto;
        margin-bottom: -6px;
        height: 100px;
        top: -106px;
    }

    main::after {
        content: '';
        position: absolute;
        border: 3px solid #121f28;
        border-bottom: none;
        border-right: none;
        border-radius: 20px 0 0 0;
        width: calc(100% - 140px);
        margin-left: auto;
        margin-bottom: -6px;
        height: 100px;
        bottom: -88px;
    }

    .box {
        width: 140px;
        height: 90px;
        background-color: #13232a;
        position: absolute;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .container:nth-child(odd) .box {
        right: -65px;
        margin-left: auto;
        top: 50px;
    }

    .container:nth-child(even) .box {
        left: -65px;
        margin-right: auto;
        top: 50px;

    }

    .circle {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #465157;
        border: 5px solid #70797e;
    }

    .container:nth-child(odd) .item {
        text-align: end;
        padding-right: 140px;
    }

    .container:nth-child(even) .item {
        text-align: start;
        padding-left: 140px;
    }

    .item h1 {
        margin: none;
        color: #d1d3d4;
    }

    .item h3 {
        margin: none;
        color: #00b6b9;
    }

    .item p {
        text-align: justify;
        color: #414548;
    }
 <main>
        <div class="container">
            <div class="box">
                <div class="circle"></div>
            </div>
            <div class="item">
                <h1>2023</h1>
                <h3>Q1</h3>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe eius nihil totam esse ratione ullam
                    molestias ad ea, sunt minima tempora magnam veritatis voluptate dicta! Odit voluptatem eaque dicta
                    molestiae?
                </p>
            </div>
        </div>
        <div class="container">
            <div class="box">
                <div class="circle"></div>
            </div>
            <div class="item">
                <h1>2023</h1>
                <h3>Q2</h3>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe eius nihil totam esse ratione ullam
                    molestias ad ea, sunt minima tempora magnam veritatis voluptate dicta! Odit voluptatem eaque dicta
                    molestiae?
                </p>
            </div>
        </div>
        <div class="container">
            <div class="box">
                <div class="circle"></div>
            </div>
            <div class="item">
                <h1>2023</h1>
                <h3>Q3</h3>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe eius nihil totam esse ratione ullam
                    molestias ad ea, sunt minima tempora magnam veritatis voluptate dicta! Odit voluptatem eaque dicta
                    molestiae?
                </p>
            </div>
        </div>
    </main>

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

What is the best way to implement automatic scrolling to the bottom of a materialUI drawer in React after a page refresh?

I am facing an issue with my Material UI Drawer, which contains numerous checkboxes and radio buttons for an advanced search page. Whenever a checkbox or radio button is clicked, it triggers an API request to fetch results instantly without requiring a sub ...

javascriptreactjs

CSS directives are not compatible with Internet Explorer 8

I implemented a registration form with CSS rules that highlight error fields with a red border when users submit incorrect or empty data. However, this functionality is not working in Internet Explorer. The red border appears correctly in Firefox and Safar ...

cssinternet-explorerfirefox

I'm trying to figure out how to effectively interpolate a Link component within a text that shifts its position using Next-i18next/React i18next

Currently, I am utilizing Next.js with Next-i18next for internationalization. However, I have noticed that the React/i18next setup is essentially the same. My issue arises when I need to inject a Next Link component within translated text. The challenge l ...

reactjsnext.jsinterpolationi18nextreact-i18next

Tips for incorporating clickable messages from PrimeReact into your React application

Currently, I am attempting to replicate the functionality demonstrated in this example, which showcases clickable messages from the PrimeReact components library. However, I have encountered a variable named messages within the code that I am unsure of its ...

reactjsprimereact

Animating CSS Pixel Fragments

After applying a simple CSS animation that moves size and box shadows from one side of the screen to the other, I am noticing residual pixel fragments left behind. To see this issue in action on Chrome 66, check out the Code Pen: https://i.sstatic.net/Gl ...

javascripthtmlcssanimation

"Animating a card to slide in from the left side upon clicking a button in a React app

How can we create a feature where, upon clicking "Apply Coupon" in Image 1, a window slides in from the left just above the webpage (as shown in Image 2)? Additionally, in Image 2, there is a blue transparent color on the webpage adjacent to this sliding w ...

javascripthtmlcssreactjs

Exploring the distinctions among different material design frameworks

Confirming my grasp of the situation here. Material design is an interface building approach developed by Google. Material lite is Google's public implementation of this concept. serves as an independent open-source adaptation. In addition, Angul ...

cssangularmaterial-design

How to Use CSS to Align an Image in a Header

I'm struggling to position an image on the top right corner of my page, specifically in the header. Despite searching for help on Stack Overflow and other online resources, I can't seem to figure it out. Currently, here is what I have: https://i ...

htmlcss

Google API React Module

As a newcomer to React and RN, I have explored various solutions without success in my quest to retrieve Google Calendar events using the calendar v3 API. Despite trying two different approaches, neither yielded the desired results. Initially, I attempted ...

reactjseventsreact-nativegoogle-calendar-api

Enhance your SVG with a stylish border by adding a decorative

Is there a way to add a blue or black border that follows the curve of an SVG used as a divider? <svg width="100%" height="96px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" prese ...

htmlcsssvg

Sticky List Items Overlap in React with Material-UI

I'm trying to create a material-ui list item with sticky subheaders. I've managed to make the subheader stick, but when scrolling, it overlaps with the items: https://i.sstatic.net/kOgfZ.png Does anyone know how to prevent this from happening? ...

reactjsmaterial-ui

Attempting to create a tracker that increments every time a form input field is filled out using React in conjunction with Formik

I am attempting to develop a function that will increase every time a user enters information into a field. Within my existing setup, I have a parent component with a state containing a counter value initialized to 0. My child component is a Formik contai ...

javascriptreactjsformsfunctioncount

Choose information based on the prior choice made

Using the Material UI Stepper, I have a task that involves setting conditions based on the selection of checkboxes. In step one, there are two checkboxes - Individual and Bulk. In step two, there are also two checkboxes - First Screening and Second Screeni ...

javascriptreactjsmaterial-ui

React state update not triggering a component re-render

I've been attempting to toggle the visibility of a div by clicking on another div, but I'm encountering an issue. The div becomes invisible on the first click only if it was visible initially. After that, it remains invisible and does not update. ...

javascripthtmlcssreactjsstate

Switches in a React-Native ListView are not refreshing properly

Situation: I encountered an issue with a ListView of Switches Problem: The Switches are not changing state when pressed. When debugging, each switch appears to be checked momentarily after the setValue function is called, but then reverts back to unchecked ...

javascriptlistviewreactjsreact-native

How can I align two div buttons at the top and bottom to appear on the left and right sides?

How can I change the position of two buttons from top and bottom to left and right as shown in the second image? I am utilizing Floating Vue, so the buttons will be contained within a div. Is it feasible to adjust their position accordingly? Check out th ...

htmlcssvue.js

A guide on managing multiple onClick events within a single React component

Including two custom popups with OK and Cancel buttons. Upon clicking the OK button, a review is composed. This review code is then sent to the server via a post request. Subsequently, the confirmation button reappears along with a popup notifying the user ...

javascriptreactjsnext.js

Generate a dynamic animation by combining two images using jQuery

My attempt to animate two images is not working. I received some help on Stack Overflow but still facing issues with my CSS and HTML code. This is the code I am using: $(document).ready(function() { $(".animar").click(function() { $("#img4" ...

javascriptjquerycsshtmlcss-animations

Tips for accessing subdocument data from Mongoose in the frontend using ReactJs

I am looking to retrieve comprehensive information about a collection known as "commercant", which includes another collection called "personne" in the front end using ReactJs. Although Postman returns all data, the front end is struggling to interpret the ...

node.jsreactjsmongodbmongoose

Ways to make the submenu display underneath the main menu

Click here to view the menu It is important to note that you may need to expand the Result Box in order to see the full menu. The issue I am currently facing involves fixing a submenu that appears when hovering over the Men and Women <li> elements. ...

javascriptjqueryhtmlcssmenu