Show only half of a div element on an HTML page

Can someone help me achieve this design?

https://i.sstatic.net/435TA.png

I'm not very familiar with HTML, but I want to create a rectangle in a div and only display half of it. However, my attempts have been unsuccessful so far. Here is the current layout of the website and how I would like it to appear:

https://i.sstatic.net/2W1QJ.png

Below is the code snippet being used:

header {
  font-family: Arial;
}
// CSS code continues...

#rectangle {
  width: 1000px;
  height: 900px;
  background: rgb(187, 199, 124);
  border-radius: 500px; // This creates rounded edges for the rectangle
}
<html>
// HTML markup continues...

htmlcss

Answer №1

To achieve this effect, you can make use of transform:translateX property

header {
    font-family: Arial;
}

header nav {
    color:white;
}

header nav ul {
    list-style:none;
    margin:0;
    padding:0;
}

header nav ul li {
    margin:0;
    padding: 0;
    float: left;
    width:200px;
    height:40px;
    background-color: rgb(187,199,124);
    line-height: 40px;
    text-align: center;
}

header nav ul li a {
    display: block;
    text-decoration: none;
    color:white;

}

header nav ul li a:hover {
    background-color: rgb(163,175,75);
    opacity: 0.5;
}

header nav ul li ul li {
    display: none;
}

header nav ul li:hover ul li {
    display: block;
}

.fit-picture {
    max-width: 12%;
}

#rectangle {
    width:1000px;
    height:900px;
    background:rgb(187,199,124);
    border-radius: 500px;
    transform:translateX(-250px);
}
<html>
<head>
    <title>Home - Example Website</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<header>
    <nav>
        <ul>
            <li><a><img class="fit-picture" src="menu-icon.png" alt="Menu">HOME</a>
                <ul>
                    <li><a href="index.html">HOME</a></li>
                    <li><a>CABINS</a></li>
                    <li><a>ACTIVITIES</a></li>
                    <li><a>PRICING</a></li>
                    <li><a>CONTACT</a></li>
                    <li><a>LEGAL</a></li>
                </ul>
             </li>
         </ul>
     </nav>
 </header>
 <body>
     <div id="rectangle"></div>
 </body>
 </html>

Answer №2

If you want to achieve this effect, you can utilize transform:translateX.

header {
    font-family: Arial;
}

header nav{
    color:white;
}

header nav ul{
    list-style:none;
    margin:0;
    padding:0;
}

header nav ul li{
    margin:0;
    padding: 0;
    float: left;
    width:200px;
    height:40px;
    background-color: rgb(187,199,124);
    line-height: 40px;
    text-align: center;
   
}

header nav ul li a{
    display: block;
    text-decoration: none;
    color:white;

}

header nav ul li a:hover{
    background-color: rgb(163,175,75);
    opacity: 0.5;
}

header nav ul li ul li{
    display: none;
}

header nav ul li:hover ul li{
    display: block;
}

.fit-picture{
    max-width: 12%;
    z-index:1;
}

#rectangle{
    width:500px;
    height:400px;
    background:rgb(187,199,124);
    border-radius: 500px;
    transform:translateX(-250px);
    z-index:-111;
}
<html>
<head>
    <title>Home - Lovely Cottage</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<header>
    <nav>
        <ul>
            <li><a><img class="fit-picture"
     src="menu-icon.png"
     alt="Menu">HOME</a>
                <ul>
                    <li><a href="index.html">HOME</a></li>
                    <li><a>COTTAGES</a></li>
                    <li><a>ACTIVITIES</a></li>
                    <li><a>PRICING</a></li>
                    <li><a>CONTACT</a></li>
                    <li><a>REGULATIONS</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</header>
<body>
     <div id="rectangle"></div>

</body>
</html>

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

Aligning HTML form elements side by side

I am having trouble displaying multiple Bootstrap elements and buttons in a single line. Here is an example of what I have: <span><input class="form-control" id="filename" value="Select a ZIP file to upload..." disabled style="display: inline"> ...

jqueryhtmlcsstwitter-bootstrap

Is there a way to automatically populate my second dynamic dropdown list on page load?

I am currently working on a dynamic drop down menu that consists of two lists. When the page initially loads, the second drop down list is empty. However, I would like both lists to be displayed by default. You can see an example of the issue I'm faci ...

jqueryhtmljson

Update the button appearance with a Strikethrough effect using JavaScript

I'm working on a web application that allows users to create to-do items. My goal is to have the text field be crossed out when the checkbox is checked. When the "add todo" button is clicked, a new item is generated in JavaScript. Then, if the checkb ...

javascriptcssnode.jsstrikethrough

How can you reposition a component within the dom using Angular?

Just started learning Angular, so I'm hoping this question is simple :) Without getting too specific with code, I could use some guidance to point me in the right direction. I'm currently developing a small shopping list application. The idea i ...

javascripthtmlangulartypescript

Choosing a parent element with SASS/SCSS

I'm facing a slight issue with SCSS syntax while creating a small component using the BEM methodology. Here's the HTML: <div class="message message--success"> <div class="message__title"> BEM Example </di ...

htmlcsssassbem

Stack one image on top of another while maintaining their original proportions using HTML and CSS

I have two images, one is used as a background (A) and the other (B) is positioned over a portion of the background. The issue I am facing is that when the resolution changes, the image B moves and is no longer in the desired position. https://i.sstatic.ne ...

htmlcss

Tips on customizing the appearance of the dropdown calendar for the ngx-daterangepicker-material package

Is there a way to customize the top, left, and width styling of the calendar? I'm struggling to find the right approach. I've been working with this date range picker. Despite trying to add classes and styles, I can't seem to update the app ...

javascriptcssangulartypescriptangular-material

Changing the background-color of a Bootstrap 4 checkbox also alters its size

Is there a way to prevent the check icon on my checkbox from resizing when I change the background color? Here's a snippet of my code for reference: .custom-checkbox .custom-control-indicator { border-radius: 50%; height: 25px; width: 25px; ...

htmlcsstwitter-bootstrapbootstrap-4

Issue with Firefox browser: Arrow keys do not function properly for input tags in Twitter Bootstrap drop down menu

Requirement I need to include a login form inside the dropdown menu with username and password fields. Everything is working fine, except for one issue: Issue When typing, I am unable to use the arrow keys (up/down) in Firefox. This functionality works ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Why is $(window).load() being executed twice?

When using $(window).load() to resize images in a thumbnail gallery and set up a slideshow, the code seems to be running twice. This can be observed by noticing that a div is being wrapped around another div twice when inspecting the HTML on page load. Af ...

javascriptjqueryhtml

React JS Bootstrap Dropdown Troubleshooting

I'm facing a challenge in my React.js project while trying to implement a filter. The issue is that the list appears when I click on the button, but it doesn't disappear on the second click or if I click outside the list. Initially, I imported t ...

javascriptcssreactjstwitter-bootstrap

I'm having trouble getting my Retina image code to work perfectly. The high resolution image isn't loading at its full

After learning how to display my Retina optimized logo from this tutorial (link), I encountered an issue when testing on my iPad and Samsung Galaxy Note II (using Safari, Firefox, Dolphin apps). The Retina image is showing up at its full size of 1200px x 5 ...

androidcssipadretina-display

CSS :hover triggers when hovering AROUND the div element instead of directly OVER it

I'm encountering a subtle yet bothersome issue: I'm attempting to incorporate a "Close" button using CSS image replacement. The HTML code is as follows: <div id='close' title='Close'> <a href='#'> ...

csshoverimage-replacement

The function TagBuilder.MergeAttributes is malfunctioning

My attempt at creating a custom helper in MVC is not working as expected. The custom attributes are not being added to the HTML: Custom Helper Function public static MvcHtmlString MenuItem(this HtmlHelper helper, string linkText, string actionName, strin ...

c#asp.net-mvchtmltagbuilder

Using jQuery to control mouseenter and mouseleave events to block child elements and magnify images

My objective is to create a hover effect for images within specific div elements. The images should enlarge when the user hovers their mouse over the respective div element. I plan to achieve this by adding a child element inside each div element. When the ...

javascripthtmljquerycss

Prevent images in Bootstrap carousel from being cropped while adjusting device height and width

I am attempting to implement a responsive bootstrap carousel similar to the one showcased in the airbnb example. My challenge lies in ensuring that the carousel remains responsive across all device sizes. I have tried setting fixed height and width for bot ...

htmlcssbootstrap-4

Unable to close Bootstrap modal upon clicking "x" or "close" buttons

Hey everyone, I'm having a bit of trouble with my modal. It appears correctly when clicked to open, and the close buttons seem to detect that my mouse is hovering over them. However, when I click on the buttons, nothing happens and the modal remains o ...

javascripthtmlbootstrap-4

Ways to automatically change a URL into a clickable link upon pasting

When attempting to paste a URL into the text box such as https://stackoverflow.com/, it does not automatically convert to a hyperlink. I previously tried using regular expressions in this related question. The function I implemented worked correctly, howe ...

javascriptjqueryhtmljquery-plugins

When working with Angular Universal, I encountered an issue where localStorage is not defined. This has caused a problem in a function that

I have a function in my application that requires an object as one of its parameters: const checkValues = { promoId: ..., ... unsaved: !JSON.parse(localStorage.getItem('unsaved')) ? [] : JSON.parse(localStorage.getItem('unsaved') ...

javascriptnode.jshtmlangularangular-universal

What steps can be taken to ensure that an element does not exceed the boundaries of its grandparent container?

I am facing a unique scenario where I have a div with dynamic content, and inside it is another div containing a growing list. The challenge is to allow the internal div to expand until the root div reaches its maximum height, after which overflow should ...

htmlcss