How can I incorporate a vertical line divider and a legend into a curved box using HTML and CSS?

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

I have this image that I need to divide into three sections with a legend at the top, similar to the image shown.

So far, this is the code I have, but I'm struggling with creating the vertical line, adding space between the top and bottom, and creating a curved border for the legend at the top.

<!DOCTYPE html>
<html>
<head>
<style>

#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px; 
  width: 650px;
  height: 150px;  
}

</style>
</head>
<body>

<p id="rcorners2"></p>


</body>
</html>

I'm a beginner in HTML and CSS and would greatly appreciate any help with the code! Thank you!

javascripthtmlcssformsbootstrap-4

Answer №1

Check out this code snippet:

<html>
<head>
<style>
  .container {
  width: 600px;
  height: 120px; 
    position: relative;
  } 
  .key {
    position: absolute;
    height: 18px;
  border-radius: 20px;
  border: 2px solid #FF5733;
    width: 25%;
    top: 0;
    background-color: #E8E0FF;
    left: 37%;
  }
#box-style {
  top: 8px;
  position: relative;
  display: flex;
  border-radius: 20px;
  border: 2px solid #FF5733;
  padding-top: 18px;
  padding-bottom: 18px;
  width: 100%;
  height: 120px; 
  box-sizing: border-box;
}
  
  .bar {
    box-sizing: border-box;
    height: 100%;
    flex: 1 1 auto;
    border-left: 2px solid blue;
  }
  .bar:first-child {
    border-left: none;
  }


</style>
</head>
<body>
<div class="container">
  <div id="box-style">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
  <div class="key"></div>
</div>


</body>
</html>

Answer №2

  1. It would be beneficial to learn more about how to apply padding to create white space around the main box.

  2. To create the curved box above, consider using position: absolute for the child element (the curved box) and position: relative for its parent (the main box) to control positioning.

  3. For rounded corners, utilize the border-radius property.

For beginners, I recommend exploring tutorials on sites like w3schools.com to deepen your understanding. If you encounter any difficulties, feel free to seek guidance from the community here.

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

Display extensive text content in HTML for mobile devices

As I work on developing a web app, specific requirements must be met: Pages that can dynamically load large amounts of text (around 30-100 printed pages) in HTML using $.ajax based on complex functions The complete text must be loaded upfront and cannot ...

htmljquerydomweb-applicationsrendering

Discover the best way to implement aliases for embedded base 64 images within HTML code

I am trying to incorporate Base64 embedded images into my HTML file, but the image sizes are over 200k, making the base64 data part very large. To address this issue, I would like to place these images in another tag, such as a script, and attach them at ...

javascripthtml

guide on implementing a horizontal scrolling/swipe navbar with Cordova

Currently, I am working on creating a "category list" with multiple items for a Cordova app. The initial approach was to use a simple HTML list, but unfortunately, it seems that my list is causing some unexpected behavior. Desired swipe navbar layout: ht ...

jqueryhtmlcsscordova

Encountered an Error: The JSON response body is malformed in a NextJS application using the fetch

Running my NextJS app locally along with a Flask api, I confirmed that the Flask is returning proper json data through Postman. You can see the results from the get request below: { "results": [ [ { "d ...

javascriptreactjsjsonnext.jsjsx

Is it possible to utilize an if statement to select a specific Bootstrap modal?

How can I make a modal appear when the user clicks select? The first page has radio buttons (e.g. oneway, twoway), and I want the second page to display different fields based on which radio button is selected. Can I use an if statement for this? If so, ...

javascriptphphtml

Function activation in Element requires a double click to initiate

I've encountered an issue with a web element I'm working on where the click function only triggers after the first click, rendering the initial click ineffective. Here's the code snippet in question: HTML: <div> <a href="#0" cla ...

javascripthtmlcss

Is tabIndex being used as a css property?

I'm trying to understand how to utilize the HTML attribute tabindex using CSS. Specifically, I want to assign tabIndex=0 to all div elements that have the className='my-checkbox'. This is my current approach: <div tabIndex="0" classNam ...

htmlcssdompropertiestabindex

I am seeking assistance with my code. It is passing most of the test cases, but is failing only two without any error messages. What could

I recently started teaching myself programming, so please excuse me if my question seems a bit basic. One of the challenges on CodeCamp requires defining a function that takes an array with 2 values as input and returns the Least Common Multiple (LCM) of ...

javascript

What seems to be the issue with loading this particular file into my JavaScript code?

When attempting to import a file into my code, I encountered an issue where the folder could not be found. Interestingly, when manually typing out the folder name, it is recognized and suggested by the system. Even providing the full path did not yield dif ...

javascriptreactjsvisual-studio-code

Retrieving the selected value from a dropdown menu before it is altered using vanilla JavaScript

I am trying to implement a feature where the previous value of a dropdown is captured when it is changed. Essentially, I need to compare the previous and current values of the dropdown and perform an action based on that information. For example, if Option ...

javascripthtml

Connecting radio buttons to data in Vue using render/createElement

How do you connect the value of a selected radio button to a specific variable in the data object within a Vue application when using the render/createElement function? ...

javascripthtmlvue.jsradio-buttonrendering

Is it possible for a website administrator to view the modifications I have made to the CSS and HTML code?

Is it possible for a website to detect any temporary changes made to their CSS or Html through developer tools, even though these changes are not permanent? ...

htmlcss

In making reference to a particular subpage within a parent page

My website is designed with all inner pages linked to one master file. I'm looking to change the title font size on just one specific page, without affecting the rest of the pages that use the master file. Is there a way to target a specific page titl ...

javascriptcssasp.net

Oops! It seems like there's a problem with reading the 'strEmail' property of undefined. Do you have any ideas on how to fix this issue

Currently, I am working with Express.js to create a straightforward login post request. Here is the code snippet: app.post("/login", (req, res) => { res.send( { isUserRegistered: userLogin(req.body.strEmail, req.body.strPassword), ...

javascriptnode.jsexpress

Exploitable Weakness Found in NestJS Version 8.4.5

After running npm audit on my npm package recently, I encountered an error that is related to the dicer package, widely used by NestJS. I have looked for solutions online but haven't been able to find any fixes so far. Has anyone else managed to reso ...

javascriptnode.jsnpmnestjs

An empty array is being returned from a mongoose function call

I'm currently working on a project that involves fetching random values from MongoDB using mongoose and storing them in an array. However, I am facing an issue where the array appears to be empty outside the function: exports.Run = (req, res) => { ...

javascriptnode.jsmongodbmongoose

Struggling with dynamically updating fields based on user input in real time

I have a goal to update a field based on the inputs of two other fields. Currently, all the fields are manual input. Below is the code I'm using to try and make the "passThru" field update in real-time as data is entered into the other fields. The ma ...

javascripthtmlnode.js

Show the output of a MySQL query on a modal, alert, or popup box within a webpage initiated by a search box, with the option to close the

Having worked in IT for 16 years, I am new to coding and seeking help on displaying search results from an input HTML box. I want the data from a MySQL database to be displayed in a modal, alert, or popup box with a closing "X" button. This database only c ...

javascriptphpmysqlbootstrap-modal

Can someone share with me the best practices for implementing @HostListener within a method in my Angular 16 project?

Currently, I've been involved in developing a Single Page Application using Angular 16, TypeScript, and The Movie Database (TMDB). My task at hand is to implement the "infinite scroll" functionality on a particular component. To achieve this, I have ...

javascriptangulartypescript

Refresh the view in AngularJS following a successful $http.get request

I have a <ul> in my HTML view that is populated based on a $http.get request. HTML: <div id="recentlyReleased" ng-controller="sampleRecordController as recCtrl"> <h1>Sample Records</h1> <ul> <li class= ...

javascriptangularjs