I've been struggling to create this particular shape using HTML/CSS, and I just can't seem to get it right. If anyone could offer some guidance, I would greatly appreciate it. Using JS is no issue at all. Even the slightest hint in the correct direction would be very helpful. Thank you, here is a visual representation of what I'm trying to achieve.
Here is a simple solution using just one element:
.box {
width: 200px;
height: 200px;
margin-top: 40px;
border-radius: 20px 20px 0 0;
background: black;
}
.box::before {
content: "";
display: block;
width: 50px;
height: 50px;
background: inherit;
border-radius: 50%;
margin: auto;
transform:translateY(-20px);
}<div class="box"></div>Utilizing vh and % units for responsive design in a concise code snippet.
* {
margin: 0px;
padding: 0px;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
div {
position: relative;
display: flex;
justify-content: center;
margin-top: 10%;
padding-top: 40%;
width: 40%;
background: black;
border-radius: 14% 14% 0 0;
}
p {
display: block;
content: "";
position: absolute;
width: 10%;
padding-top: 10%;
margin-top: -28%;
background: black;
border-radius: 50%;
}<div></div>
<p></p>Utilize two different div elements: one matching the width and height of the larger section, and another forming a square with side length equivalent to the diameter of the semicircle.
Ensure that both divs have a black background color.
The larger section should have rounded corners, approximately 10% for the top corners and 0% for the bottom corners - feel free to adjust as needed.
The semicircle is actually a full circle, with a border radius of 50%. It should be positioned absolutely within the larger section.
Note that using border radius may sometimes result in a slightly jagged appearance. In such cases, consider utilizing SVG instead of HTML and CSS as per your query.
To ensure flexibility in size and position, use percentages for dimensions and positioning so the design can adapt accordingly.
*Adding on to the existing responses that discussed using <div> in HTML/CSS, here is an alternative SVG method:
You can create SVG graphics using tools like Adobe Illustrator, Figma, or Vectornator and then export them as inline SVG code. Alternatively, you can manually input the coordinates and paths, although this process can be time-consuming. Click on the blue Run code snippet button below to see the output and check responsiveness by viewing the full page link:
#Shape {
position: absolute;
--Width: 60%;
--Height: 80%;
width: var(--Width);
height: var(--Height);
top: calc(50% - var(--Height)/2);
left: calc(50% - var(--Width)/2);
}<svg id="Shape" viewBox="0 0 374 381" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M248.434 46H334C356.092 46 374 63.9087 374 86V381H0V86C0 63.9087 17.9082 46 40 46H125.566C133.342 19.417 157.903 0 187 0C216.097 0 240.658 19.417 248.434 46Z" fill="rgba(30,28,33,1)"/>
</svg>To achieve a logo with rounded borders using CSS, you can utilize the 'border' property for the middle span and 'border-radius' property for the left and right spans. Adjust the dimensions as needed to resize the logo.
/* Apply default styles to prevent interference */
#logo span {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
display: inline-block;
background-color: black;
}
/* CSS for the logo design */
#logo .l, #logo .r {
width: 160px;
height: 420px;
}
#logo .l {
border-top-left-radius: 45px;
}
#logo .r {
border-top-right-radius: 45px;
}
#logo .m {
width: 0;
height: 475px;
border: 55px solid black;
border-top-left-radius: 55px;
border-top-right-radius: 55px;
}<div id="logo">
<span class="l"></span><span class="m"></span><span class="r"></span>
</div>Having trouble looping through an array with JavaScript/jQuery to display data and remove contents with button clicks. Original Code in Question HTML <textarea rows="4" cols="40" id="sds">Apple Banana Grape Orange</textarea> <input type=" ...
I'm a CSS novice and I have encountered a scenario where I need to apply a CSS class only when another class is not present. <div class="border-solid p-2 bg-white mt-1 h-fit" [ngClass]="SOME_CONDITION ? 'tile-con ...
Trying to embed a YouTube video on your webpage? Most sources suggest using the following code: HTML <div class="video-container"><iframe.......></iframe></div> CSS .video-container { position:relative; padding ...
I am facing the challenge of breaking a large text into paragraphs of equal size, with the same number of string lines in order to maintain uniformity. Currently, I am using PHP and the following code to achieve this: function arrangeText(){ if (have_ ...
<!-- Unique Header --> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-togg ...
I'm having difficulty figuring out how to synchronize a function with the updates on a webpage. I currently have a checkbox that triggers a function when checked. Here is the HTML code: <input type="checkbox" value="data.id" id="status" ng-model ...
I am struggling to implement this example using TypeScript. I have included <script src="lib/three.min.js"></script> and <script src="lib/OrbitControls.js"></script> in the <head> of my html file, and the TypeScript file in t ...
Need help with setting the proper maxlength attribute for text fields in an HTML form based on maximum field length in MySQL database. Is there a way to query MySQL for this information? I currently use SHOW COLUMNS FROM {database name}, but it includes f ...
I'm currently working on a straightforward React page, but I've encountered an issue right from the start: my text is overflowing the box and I can't figure out why. Could someone take a look at my styles? Here's a picture showing the ...
Hey there, I'm currently brainstorming ways to utilize an accordion widget in a unique way. Specifically, I want each h3 trigger to reveal a different div when selected, hiding the previous one in a seamless manner. Picture this - A sleek three ...
I'm facing some issues with the navigation bar on my responsive website. One issue is that the clickable area for the links does not extend to the full height of the nav bar, and I would like it to cover the entire height. Another problem arises whe ...
For extracting the HTML body of a document, I am familiar with utilizing the IHTMLDocument2 interface by invoking the get_body member function. However, obtaining the head seems to be more challenging. Is there an alternative method since the IHTMLDocumen ...
I am attempting to apply a border to an input element when its pseudo class :hover is activated, while also adding the same border to the button next to it. I have read that using the selector class:hover + class should achieve this effect. However, in my ...
I'm struggling to understand what's wrong here. The querySelector doesn't seem to be functioning correctly as I keep encountering the error "cannot read the property of null" on line 10 of my JavaScript code. const deg = 6; const hr = docum ...
I am currently working on a gallery of thumbnail images. Each image is accompanied by a title below it: <div class='gallery'> <div class='thumb'> <div class='thumbimage'></div> <div class ...
I am attempting to give a container a background image and then create two div tags using the col-md-6 classes from Bootstrap. The main div's background image is of grass texture, while the two inner divs have a skeleton of a football court as their b ...
I attempted to follow the guidance found here, tweaking it to suit my requirements, but unfortunately, it's not producing the desired result. I am endeavoring to conceal a parent div that contains two child elements. These parent divs are part of a li ...
I need to create a search bar that connects to google.no (Norway). When searching for music, the URL should look like this: *. Can anyone help me understand how to add the (& *) at the end of a search? .search { border: solid 1px grey; border-ra ...
My goal is to display a new image in an existing <img> tag by updating the src attribute using JavaScript. The issue I'm facing is that the screen doesn't immediately reflect the change when the src is updated with the URL of a thumbnail im ...
I am facing an issue with centering an h1 header within a .banner element. When I try to apply margin to the header, it appears to indent not from the top border of the banner, but rather from the nav element located above the banner. After inspecting the ...