How can I create a div with a curved design?

I am faced with a challenging task, that of converting a design into a static HTML page. The design in question features curves where the logo sits and at the bottom. I have made some progress, but there are still parts that need refinement.

The original design can be viewed here.

Below is a snippet of the messy code that I currently have:


body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, blockquote {
margin: 0; padding: 0; border: 0;
}

body {
font-family: Helvetica, Arial, Sans-Serif; line-height: 24px;
background: #eee url(images/body-bg.jpg) center top no-repeat;
}
...
htmlcss

Answer №1

To achieve the desired visual effect, you can utilize transparent background images like .png or .gif and allocate them to specific positions within each div. Utilizing absolutely positioned divs with a z-index hierarchy can also assist in creating the desired look, although adapting this method for a responsive layout may require extensive effort.

For instance, you can extract the top curve (comprising of both white and blue sections) using an image editor, ensuring the background remains transparent before saving it correctly. Subsequently, your code could resemble:

//STYLES CSS
.splash{
   background-image:url("icewater.jpg");
   width:1289px;
   height:513px;
   position:relative;
   z-index:1;
}
.top-curved-section{
   position:relative;
   top:0;
   left:0;
   z-index:2;
   background-image:url("blue-white-curve.gif");
   background-repeat:no-repeat;
   background-position:top left;
//Padding to ensure proper display of logo element
   padding: 20px 0 0 20px;
//Estimated heights to set the size of the div for background image
   width:400px;
   height:150px;
}

In its simplest form, the HTML markup would be:

    <div class="splash">
<div class="top-curved-section">
<img src="yourlogo.png" alt="Your Logo">
</div>
</div>

Feel free to apply a similar approach for the bottom curved section of your splash page by implementing:

.bottom-curved-section{
       position:relative;
       bottom:0;
       right:0;
       text-align:right;
       z-index:2;
       background-image:url("blue-white-curve2.gif");
       background-repeat:no-repeat;
    background-position:bottom right;
    //Padding to ensure proper display of logo element
       padding: 0 20px 20px 0;
    //Estimated heights to set the size of the div for background image
       width:400px;
       height:150px;
    }

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

I'm having trouble getting the font to display properly on Safari (mac) similar to how it appears on

Recently, I completed a website for a client at . The owner requested the footer text to be styled similarly to the footer text on . However, upon review, it seems that the font in the lists on desiringgod appears thinner compared to the site I built. Thi ...

cssfontssafari

Changing the name of a radio button dynamically using jQuery

Trying to find a solution like the following: $("input:radio:checked").previous("name", "original_name").attr("name","new_name"); I've experimented with a few methods found here, but keep encountering the error: Object Expected Any assistance would ...

javascriptjqueryhtmldomradio-button

JavaScript validation for basic "select" isn't functioning as expected

I need assistance with my simple "select" validation using JavaScript. The issue I am facing is that when validating the "select" element, it does not display the select options to users after a validation error occurs. "The select option is not re-enabl ...

javascripthtmlvalidation

IFrame displaying blank page instead of report

The following code snippet displays a report within an IFrame: HTML <div id="dialogReport"> <div> <iframe id="reportFrame" style="width: 800px; height: 600px; border: 2px solid black; margin: 10px auto;"> </iframe> </di ...

javascriptjqueryhtmliframe

Engaging with JSON data inputs

Need help! I'm attempting to fetch JSON data using AJAX and load it into a select control. However, the process seems to get stuck at "Downloading the recipes....". Any insights on what might be causing this issue? (Tried a few fixes but nothing has w ...

javascripthtmljson

Ensure that text input is restricted from containing any HTML or script tags when utilizing the Web API within an HTML page

On a html page, there are two text boxes provided for entering Employee Name and Employee Age, along with a Save button. Clicking this button triggers the Web API method called SaveEmployeeData to save the data. This Web API is hosted on an asp.net website ...

javascriptc#htmlvalidationasp.net-web-api2

What is the best way to automatically populate the date and time fields in PHP MySQL without manual input?

Is there a way to automatically populate these two input fields without any manual input? <input type="time" name="Time" id="Time" value="" /> I am looking for a solution to automatically fill the date and ti ...

javascriptphphtmlcssmysql

What is the best method to activate a button only when the appropriate radio buttons have been chosen?

Just dipping my toes into the world of javascript. I've created a form with a set of "Yes/No" radio buttons, and I attempted to create a function that will disable the "Submit Form" button if any of the following conditions are met: If one or more r ...

javascripthtmlformsbuttonradio-button

In order to position content at the center of a <div> element

Just recently delving into the world of Bootstrap, I've hit a roadblock. Here's my current conundrum: <div class="container px-4 py-5" id="hanging-icons"> <h2 class="pb-2 border-bottom">Work Experie ...

htmlcssbootstrap-5

What could be causing the lack of firing with Mobile Safari and jQuery events?

My HTML5/JavaScript app, originally designed for an in-dash car unit, is now being ported to the browser for marketing and presentation purposes. The transition seemed simple at first, just some CSS adjustments for cross-browser compatibility. However, whe ...

jqueryhtmliosmobile-safarijquery-events

Guide to animating the height of a div using jQuery:

I'm hoping to create a cool animation effect where a certain part of a div expands to 100% width when clicked, and then reverts back to its original height on a second click. I've tried writing some code for this, but it's not working as exp ...

javascriptjqueryhtmlcssanimation

"Create a div element with resizable capabilities, similar to a

Is it possible to resize elements like divs in browsers without using jQuery or other libraries like draggable or resizable? I know text-areas can be resized by default, but I'm curious if this functionality can be extended to other elements through p ...

htmlcsstextarea

Issue with React Hot Toast not displaying properly due to being positioned behind the <dialog>

The Challenge of Toast Notifications Visibility with <dialog> Element tl;dr When utilizing the native dialog.showModal() function, the <dialog> element appears to consistently remain on top, which causes toast notifications to be obscured by ...

javascripthtmlnext.jsdialogreact-hot-toast

Issues arise with alignment of the button in an inline form when the Bootstrap navbar collapses

Currently delving into the world of Web Development and experimenting with BootStrap 4.0. I have a search field positioned to the right of the navbar, which looks fine in desktop view. However, as soon as the dimensions change to that of a phone, my nav li ...

htmlcsstwitter-bootstrapbootstrap-4

Adding a text field on top of a div based on the dropdown value selection

I am working with a dropdown option inside a div. I want to make it so that when the last option is selected, a text box will appear on top of the dropdown. And when a different option is selected, the text box should be disabled. How can I achieve this? ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

What impact do negative positioning have on CSS elements in terms of responsibility?

Just diving into CSS and I have a question to pose: Is it considered good practice to utilize negative positioning in CSS? Are there potential compatibility issues with browsers like IE7 and IE8? What is your suggestion? #example-bottom { position: relat ...

htmlcssinternet-explorer

The <th> and <td> elements retrieved from the database do not align properly in their respective index positions

Hey fellow Developers, I'm currently working on a School Management System and I have two tables in the database - one for Subjects and another for storing scores obtained in those subjects, called 'scores'. My goal is to display subject nam ...

phphtmlmysqlpdo

What's the best way to combine cells using HTML, CSS, and PHP?

Can anyone assist me with merging cells containing identical values in specific columns? <td style="text-align: center; font-size: 9.5px;">{{$endereco->quadra}}</td> <td style="text-align: center; font-s ...

phphtmlcss

The AJAX POST request is not receiving the JSON data as expected

After creating an HTML form with the following structure: <form id="loginForm" name="loginForm"> <div class="form-group"> <input type="username" class="form-control" id="username" name="username" placeholder="Your username..." > ...

javascripthtmlnode.jsajaxpost

Real-time Data Stream and Navigation Bar Location

Utilizing the EventSource API, I am pulling data from a MySQL database and showcasing it on a website. Everything is running smoothly as planned, but my goal is to exhibit the data in a fixed height div, with the scrollbar constantly positioned at the bott ...

javascriptjquerycssajaxhtml