I'm looking to design an HTML/CSS element that features a semicircle at the top-middle with a border. Inside this semicircle, I want to place a smaller circle containing a single character (similar to the X in the provided image). Additionally, there may be various content like text or images within this element.
If anyone could provide guidance on the most effective method for creating this type of element, it would be greatly valued.
Thank you in advance for your assistance.
The challenging aspect of this task was creating the semi-circle on the top. Simply make the height half of the width and specify only the first 2 values of the border-radius.
<div class="outer">
<div class="inner">X</div>
Text here
</div>
.outer
{
width: 300px;
height: 100px;
line-height: 100px;
border: 1px solid black;
background: lightBlue;
position:relative;
margin: 50px;
font-size: 42px;
text-align: center;
}
.outer:before
{
content: '';
width: 48px;
height: 24px;
position: absolute;
left:0;right:0;
top: -24px;
z-index: -1;
margin:auto;
border-radius: 24px 24px 0 0;
border: 1px solid black;
background: lightBlue;
}
.inner
{
width: 44px;
height: 44px;
line-height: 44px;
position: absolute;
left:0;right:0;
top: -22px;
margin:auto;
border-radius: 22px;
border: 2px solid lightBlue;
font-size: 32px;
background: orange;
text-align: center;
}
Below is a demonstration showcasing absolute positions and sizes:
UPDATE:
To eliminate the strange border effect on the circle:
This solution involves additional CSS and HTML elements, but effectively resolves the issue!
Note: The code may appear disorganized, it could be cleaned up!
HTML:
<div class="mySuperFancyEffect">
<div class="square"></div>
<div class="circle">
<div class="inner-circle"></div>
</div>
</div>
CSS:
.mySuperFancyEffect {
position: relative;
}
.mySuperFancyEffect .square {
position: absolute;
width: 180px;
height: 65px;
background-color: #66C;
border: 1px solid #000;
margin-top: 20px;
}
.mySuperFancyEffect .circle {
position: absolute;
width: 40px;
height: 40px;
border-radius: 20px;
background-color: #66C;
border-top: 1px solid #000;
margin-left: 70px;
}
.mySuperFancyEffect .inner-circle {
width: 36px;
height: 36px;
border-radius: 20px;
background-color: #DAA74C;
margin: 2px;
}
You have the ability to achieve this design using CSS
#circletop{
width:100px;
height:100px;
border-top:1px solid black;
border-top-left-radius:100px;
border-top-right-radius:100px;
}
Check out this Fiddle link for a demonstration
One possible solution could be implementing the following CSS:
#rectangle {
display: block;
position: relative;
width: 50%;
background: blue;
}
#circle {
display: inline-block;
position: absolute;
width: 5%;
top: -2%;
left: 48%;
border-radius: 800px;
background: orange;
border: 2px solid blue;
}
I'm a beginner in coding and I want to make my website impressive. Right now, I have an HTML embedded element called "On this Page" that I would like to disappear when the user scrolls down the page. I've managed to position the element on the ...
My webpage has a pinned navigation menu bar at the top and some tables with interactive features using jQuery's DataTables. However, after implementing jQuery, I encountered an issue where the tables cover the menu when scrolling down, making it uncli ...
What I'm searching for is a unique text display feature that's different from scrolling. I envision a subtle fade in/out effect, but it's not necessary. The main goal is to fit within a small area on a website with limited vertical space - ...
As I was in the process of creating a JavaScript tool to generate random strings, with or without special characters, I stumbled upon an inspiring snippet that caught my attention: (): function randStr(len) { let s = ''; while (len--) s += ...
When trying to implement the code snippet below, <MonthPicker/> I am encountering issues with the UI of the month picker both on the website and at times. https://i.stack.imgur.com/EKsYA.png It seems like the month picker is being utilized in a di ...
I am having trouble getting a CSS transition to work for animating an element's position change. I have tried using the all properties in the transition declaration like in this example: http://jsfiddle.net/yFy5n/3/ However, my goal is to only apply ...
I am encountering an issue while trying to set props in the stylesheet to dynamically change the background color based on data received from the server. undefined is not an object (evaluating 'this.props.colorCode') Below is the snippet of my ...
https://i.stack.imgur.com/2UUQl.png After designing the login page for my current project, I seem to have accidentally hidden the username text input. Can anyone explain why this is happening and provide guidance on how to make it visible again? ...
I am attempting to add animation to a modal using a transition effect. My goal is to open it slowly, either from the center of the screen or from the bottom. However, I am struggling to understand how this can be achieved... While searching on Google, I c ...
Just got my hands on this amazing Material UI component <Tabs textColor="primary" indicatorColor="primary" > <Tab label="All Issues"/> </Tabs> The documentation states that indicatorColor and textColor can only be set to ' ...
I have a question about CSS. Is it possible to apply display: table to a flex item? Whenever I try to do this, the layout doesn't behave as expected - specifically, the second flex item does not fill the available vertical/horizontal space. .conta ...
Facing some challenges with a section of my code. Essentially, new elements are dynamically added to the page using .html() and ajax response. You can see an example of the added elements in the code. Since the elements were inserted into the page using . ...
Currently tackling a project that involves numerous DIVs and sections, encountering an issue with the header. When I attempt to minimize the browser window, the search bar and panes div are not staying within the "header" section as expected. The structur ...
I have developed a web application using Flask that allows users to upload files to an S3 storage. However, I would like to enhance the user experience by showing them the progress of their file uploads in real-time. To achieve this, I am utilizing Flash t ...
After developing an HTML5 web application with offline capabilities using AppCache, the process flow is as follows: Online: While connected to the network, the app loads base information in advance. Offline: Users can take the app offline on their tablet ...
Taking the example into consideration: Imagine a scenario where you have a webpage containing numerous DIVs. Now, the goal is to render a single DIV and its child DIVs within an IFrame. Upon rendering the following code, you'll notice a black box ag ...
Just starting out with material-ui and react, I'm currently following this palette customization guide from Material-UI. However, when attempting to replicate the example shown, I encountered the error: Cannot read property 'prepareStyles' ...
My fixed positioned div (#stoerer) appears to be moving while scrolling, although it is just an optical illusion. Check out this visual explanation: view gif for clarification Below is the code snippet in question: <div id="stoerer"> <button ...
I have successfully implemented a code that prints HTML table rows from a database table and sorts them by date. The challenge lies in the fact that the date is stored as VARCHAR (due to a pre-existing project with an active database used in a PHP web app ...
Within my react js project There is a particular block that may contain either one or two elements, depending on the runtime conditions. For instance: Scenario 1: (two groups are present) <div class='menu-list'> <div class='g ...