Showing a card overlaying a custom clip-path design

I'm in the process of creating a website similar to the design of DuckDuckGo, featuring a rounded background with cards placed on top:

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

However, my current implementation has resulted in the clip-path cutting off the cards:

https://i.sstatic.net/0eDOH.png

The code I have so far includes the following CSS for the section:

 .two {
        background-color: #ff6b6c;
        clip-path: ellipse(99% 66% at 48% 77%);
    }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <section class="two" style="margin-top:250px;">
        <div class="row">
            <div class="col">
                <div class="card" style="width: 18rem;">
                    <div class="card-header">
                        Featured
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                </div>
            </div>
            <div class="col">
                <div class="card" style="width: 18rem;">
                    <div class="card-header">
                        Featured
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

Any suggestions on how to resolve this issue?

htmlcssbootstrap-4clip-path

Answer №1

My suggestion is to utilize background elements as pseudo (::before) elements. By converting it to a pseudo element, it will display in the background.

 .two {
        position: relative;
 }

 .two::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #ff6b6c;
        clip-path: ellipse(99% 66% at 48% 77%);
    }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <section class="two" style="margin-top:250px;">
        <div class="row">
            <div class="col">
                <div class="card" style="width: 18rem;">
                    <div class="card-header">
                        Featured
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                </div>
            </div>
            <div class="col">
                <div class="card" style="width: 18rem;">
                    <div class="card-header">
                        Featured
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

Answer №2

Here is the solution you've been looking for.

.two {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        background-color: #ff6b6c;
        clip-path: ellipse(99% 66% at 48% 77%);
    }

<section style="margin-top:250px;position: relative;">
    <div class="two"></div>
    <div class="row">
        <div class="col">
            <div class="card" style="width: 18rem;">
                <div class="card-header">
                    Featured
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                </ul>
            </div>
        </div>
        <div class="col">
            <div class="card" style="width: 18rem;">
                <div class="card-header">
                    Featured
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                </ul>
            </div>
        </div>
    </div>
</section>

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

Can anyone explain why two of my SVG files are displaying as identical in my React project?

The issue seems to lie within the SVG code itself. I have two SVGs exported from Figma and imported into ReactJS as ReactComponents. However, an anomaly occurs where React recognizes both SVGs as identical despite having different SVG codes. This makes me ...

htmlreactjssvgfigma

Unable to choose the specific div element within the container that has an inset shadow applied by utilizing Pseudo

It seems that I am encountering an issue when trying to select the div elements within a container that has a defined shadow using pseudo elements ::before OR ::after. Once the shadow is applied, the div elements become unselectable. Please refer to the c ...

jqueryhtmlcss

Leveraging $_POST data in embedded CSS styling

Can I use a PHP variable in inline CSS code? In the CSS section below, I have tried to incorporate a PHP variable: <style> p { text-align: center; } img{ -moz-animation:<?php $_POST["rmp"]; ?>s rotateRight infinite li ...

phphtmlcssformspost

AngularJS issue, variable not updating in place of {{clientCount}}

I'm sorry about the formatting issue. I am seeing "{{clientCount}}" on my screen instead of the number '10'. Any suggestions? Thank you! var app = angular.module('metaDashboard', []); /**This code is for the meta-dashboard ...

htmlangularjs

When displaying content within an iframe, toggle the visibility of div elements

I'm attempting to toggle the visibility of certain page elements based on whether the page is loaded in an iframe. <script>this.top.location !== this.location && (this.top.location = this.location);</script> The above code succes ...

javascripthtmlcssiframe

Enhancing tabbing accessibility with order classes in Bootstrap 4 for improved navigation

Having trouble with the bootstrap order classes like order-2 order-md-1 in conjunction with tab order for accessibility reasons. My goal is to align the tab flow with the visual flow. Take a look at this code: <div class="row"> <div class="c ...

htmlbootstrap-4

Problem with responsive design on iPhone

I'm currently working on developing a responsive chatbot using CSS Bootstrap. However, I've encountered an issue where the header and footer are not fixed when I open the app on an iPhone. The keyboard header is also moving up the screen, which s ...

javascripthtmlcssangularjs

Display Visual Basic 6 forms upon clicking a hyperlink within the HTML page of a web browser

I am currently working with the VB6 WebBrowser. My goal is to open a VB6 form when a user clicks on a specific link within the WebBrowser. Here's how it looks in HTML: <html> <head> <body> <a href="--show vb6 form--">Click To ...

javascripthtmlvb6webbrowser-control

The CSS background-image fade transition is optimized for Chrome browsers

HTML: <a class="navbar-brand page-scroll" href="#intro"></a> CSS: .navbar-custom .nav li a.navbar-brand { width: 70px; height: 62px; background: url(myimg.png) no-repeat; background-size: 70px 62px; display: block; po ...

htmlcsscross-browsercss-transitions

Main menu items failing to display sub menu options

I am in need of assistance as I am facing the same issue on two WordPress twin websites that are using the same theme (Newmagz), which is no longer purchased and therefore not supported. The submenus in the main menu are simply not appearing. I have checke ...

csswordpress

Label for the checkbox is covering other content on the screen in 1024 x 768

Here is the JSP code snippet: <h:field path="configuredChannels" required="true" code="admin.menu.channels"> <div class="row-fluid" data-channel-checkboxes="#"> <form:checkboxes element="div class=&apos ...

htmlcss

The input validation function seems to be malfunctioning

I'm troubleshooting a JavaScript function that checks for empty input fields and selected checkboxes. However, only the first check (name check) seems to be working properly, as the form is submitted regardless of the other checks. I've verifie ...

javascripthtml

Tips for creating a vintage, weathered font appearance on a web browser

Is it possible to create unique, randomly outwashed letters using a standard font? Instead of relying on pre-designed outwashed fonts available at , I am interested in achieving the same effect with a regular font that appears washed out when displayed in ...

htmlcssfontswebfontshandwriting

if the checkbox is selected, navigate to the displayed section

In my scenario, I have a total of 5 checkboxes and corresponding to each checkbox, there are 5 div elements. The functionality that I need is that when a checkbox is checked, the associated div should be displayed; otherwise, it should be hidden. The check ...

javascriptjquerycsscheckbox

Utilizing media queries to tailor the pre-designed website and ensure adaptability

I find myself in a situation where I need to make adjustments to my current website to ensure it fits properly on smaller desktop screens. While the site is viewable on all screen sizes, issues arise with screens as small as 14 inches, resulting in an unwa ...

javascripthtmlcss

What strategies can I employ to maximize the use of my table within the entire webpage?

How do I make my table utilize the entire web page instead of being centered with margins on each side? I have a 24 inch monitor with 4 inches of margin on each side, and I thought using 'table-responsive' in Bootstrap 4 would address this issue ...

bootstrap-4

Capturing images on Android devices through the camera option using HTML input file type

Having an issue with an LG G2 Android device running version 4.4.2 and the default browser. I'm currently using this tag to allow users to upload images from their devices to the server: {<input type="file" accept="image/*;” />} When I clic ...

androidhtmlbrowserinput

"Alert box displaying error message is not appearing on the screen

In order to display an error message using a tooltip, I have hidden the tooltip by setting the style of a span with an id of demo to display:none. Then I use JavaScript's getElementById method to retrieve the value of the input field with an id of use ...

javascripthtmlcsstooltip

Using Javascript, ensure that the drop-down menu remains on the currently selected item

Can someone assist me with my issue regarding the drop-down menu not staying on the selected value after submitting? I believe the problem lies within the javascript code. I appreciate any help as I am trying to learn this on my own. function GetSelect ...

javascripthtml

What is the correct way to adjust the style.top attribute of an element using JavaScript?

In order to correct a JavaScript source code, I need to adjust the style.top property of a div element based on an integer parameter from a function called index. Here is the current implementation: div.style.top = (index * 22 + 2)+"px"; However, for lar ...

javascriptcss