I am trying to create something similar to a semi circle inside a rectangle something like this, the ellipse in the background.
expected design
I am able to implement the circle inside the rectangle but couldn't find a way to cut out the extra part of the ellipse, can someone please help me with achieving the required design?
achieved
.rectangle {
height: 110px;
width:200px;
background-color: #EDEDED;
border-radius: 9px;
position: relative;
}
position: absolute;
border-bottom: 1px solid black;
border-left: 1px solid gray;
width: 110px;
height: 110px;
border-radius: 999px;
right: 0;
bottom: 20px;
left: 100px;
You want to hide the part of the circle that overflows the rectangle
You can do this by setting overflow: hidden; on the rectangle.
.rectangle {
height: 110px;
width: 200px;
background-color: #EDEDED;
border-radius: 9px;
position: relative;
overflow: hidden;
}
.circle {
position: absolute;
border-bottom: 1px solid black;
border-left: 1px solid gray;
width: 110px;
height: 110px;
border-radius: 999px;
right: 0;
bottom: 20px;
left: 100px;
}
<div class="rectangle">
<div class="circle">
</div>
</div>
.rectangle{
height: 110px;
width:200px;
background-color: #313131;
border-radius: 9px;
position: relative;
overflow: hidden;
}
.circle{
position: absolute;
right: 3px;
top: 1px;
width: 93%;
height: 95%;
border-radius: 50%;
background: #404040;
}
.circle-border{
border-radius: 50%;
position: relative;
right: -129px;
top: -6px;
width: 41%;
height: 70%;
border: 2px solid #404040;
}
<div class="rectangle">
<div class="circle-border">
<div class="circle">
</div>
</div>
</div>
Related
Here is an example code that demonstrate the issue
.under {
position: absolute;
top: 10px;
left: 10px;
border: 2px solid blue;
width: 150px;
height: 150px;
}
.under:hover {
border: 10px solid green;
}
.over {
position: absolute;
z-index: 10;
top: 10px;
left: 10px;
width: 150px;
height: 150px;
border: 1px solid black;
}
<div>
<div class="under">
Hello!
</div>
<div class="over" data-comment="I am invisible">
</div>
</div>
When the mouse hovers over the over div, I want the under div to be aware of the hover event and, in this case, change the border accordingly.
However the over div is apparently intercepting the hover event. Can there be a pure css solution to pass the hover event to the under div?
Pointer events to the rescue!
Just set pointer-events: none; to the .over.
.under {
position: absolute;
top: 10px;
left: 10px;
border: 2px solid blue;
width: 150px;
height: 150px;
}
.under:hover {
border: 10px solid green;
}
.over {
position: absolute;
z-index: 10;
top: 10px;
left: 10px;
width: 150px;
height: 150px;
border: 1px solid black;
pointer-events: none;
}
<div>
<div class="under">
Hello!
</div>
<div class="over" data-comment="I am invisible">
</div>
</div>
Note, this will make the .over div ignore ALL pointer events, so javascript click handlers won't work
I would adjust the HTML structure and detect the hover on .over
.under {
position: absolute;
top: 10px;
left: 10px;
border: 2px solid blue;
width: 150px;
height: 150px;
}
.over:hover + .under {
border: 10px solid green;
}
.over {
position: absolute;
z-index: 10;
top: 10px;
left: 10px;
width: 150px;
height: 150px;
border: 1px solid black;
}
<div>
<div class="over" data-comment="I am invisible"></div>
<div class="under">Hello!</div>
</div>
Replace the order of the divs and set on hover to the over with ~ that targets the next sibling
.under {
position: absolute;
top: 10px;
left: 10px;
border: 2px solid blue;
width: 150px;
height: 150px;
}
.under:hover {
border: 10px solid green;
}
.over {
position: absolute;
z-index: 10;
top: 10px;
left: 10px;
width: 150px;
height: 150px;
border: 1px solid black;
}
.over:hover~div {
border: 10px solid green;
}
<div>
<div class="over" data-comment="I am invisible">
</div>
<div class="under">
Hello!
</div>
</div>
I'm working on simple Escape room game using HTML, CSS and JavaScript where every item in room is figure created by CSS. But I'm stuck trying to create responsive design. Whole room should change size with different screens but still be inline. I tried grid and media queries but it's doesn't work with my figures. For now it’s just one size and a part of code in HTML and CSS looks like these:
html {
height: 100%;
}
body {
background-color: #051217;
background-image: radial-gradient(circle, #071e26, #051217);
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
#door {
width: 180px;
height: 380px;
display: fixed;
position: absolute;
right: 50px;
bottom: 2px;
border: 5px solid white;
background-color: #051217;
background-image: radial-gradient(circle, #071e26, #051217);
}
#handle {
width: 10px;
height: 10px;
border-radius: 50%;
border: 3px solid white;
background-color: #051217;
background-image: radial-gradient(circle, #071e26, #051217);
position: absolute;
bottom: 50%;
left: 5%;
}
#keypad {
width: 25px;
height: 40px;
border: 2px solid white;
position: absolute;
bottom: 37%;
left: 3%;
}
#input {
width: 20px;
height: 5px;
border: 1px solid white;
position: absolute;
left: 1%;
top: 3%;
}
.keypad {
width: 20px;
height: 28px;
border: 1px solid white;
position: absolute;
top: 19%;
left: 1%;
}
<div class="container">
<!-- Door -->
<div id="door">
<div id="handle"></div>
<div id="keypad" onmouseover="keypadMouseOver()" onmouseout="keypadMouseOut()">
<img class="keypad" src="static/images/keypad.png">
<div id="input"></div>
</div>
</div>
</div>
Here is an example code that demonstrate the issue
.under {
position: absolute;
top: 10px;
left: 10px;
border: 2px solid blue;
width: 150px;
height: 150px;
}
.under:hover {
border: 10px solid green;
}
.over {
position: absolute;
z-index: 10;
top: 10px;
left: 10px;
width: 150px;
height: 150px;
border: 1px solid black;
}
<div>
<div class="under">
Hello!
</div>
<div class="over" data-comment="I am invisible">
</div>
</div>
When the mouse hovers over the over div, I want the under div to be aware of the hover event and, in this case, change the border accordingly.
However the over div is apparently intercepting the hover event. Can there be a pure css solution to pass the hover event to the under div?
Pointer events to the rescue!
Just set pointer-events: none; to the .over.
.under {
position: absolute;
top: 10px;
left: 10px;
border: 2px solid blue;
width: 150px;
height: 150px;
}
.under:hover {
border: 10px solid green;
}
.over {
position: absolute;
z-index: 10;
top: 10px;
left: 10px;
width: 150px;
height: 150px;
border: 1px solid black;
pointer-events: none;
}
<div>
<div class="under">
Hello!
</div>
<div class="over" data-comment="I am invisible">
</div>
</div>
Note, this will make the .over div ignore ALL pointer events, so javascript click handlers won't work
I would adjust the HTML structure and detect the hover on .over
.under {
position: absolute;
top: 10px;
left: 10px;
border: 2px solid blue;
width: 150px;
height: 150px;
}
.over:hover + .under {
border: 10px solid green;
}
.over {
position: absolute;
z-index: 10;
top: 10px;
left: 10px;
width: 150px;
height: 150px;
border: 1px solid black;
}
<div>
<div class="over" data-comment="I am invisible"></div>
<div class="under">Hello!</div>
</div>
Replace the order of the divs and set on hover to the over with ~ that targets the next sibling
.under {
position: absolute;
top: 10px;
left: 10px;
border: 2px solid blue;
width: 150px;
height: 150px;
}
.under:hover {
border: 10px solid green;
}
.over {
position: absolute;
z-index: 10;
top: 10px;
left: 10px;
width: 150px;
height: 150px;
border: 1px solid black;
}
.over:hover~div {
border: 10px solid green;
}
<div>
<div class="over" data-comment="I am invisible">
</div>
<div class="under">
Hello!
</div>
</div>
I have above image and i want to make this circle structure with HTML CSS.
HTML:
<div class="circle"></div>
CSS:
.circle {
width: 96px;
height: 96px;
background: #eee;
border-color: red;
border-style: solid;
border-radius: 100%;
position: relative;
}
Please help me to create inner structure of Circle like above image by using HTML CSS, Thanks in advance :)
Use this css
#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%; left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
<div id="yin-yang"></div>
I want the border div to be "hidden" behind the circle and not cross through it. I thought z-index was the way to do things like this.
Any ideas?
JSFIDDLE: http://jsfiddle.net/qs5xmege/1/
CSS and HTML
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Give .circle a position:relative, z-index works only with position:relative, position:absolute or position: fixed
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
position: relative;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Add position:relative; to .circle.
z-index need relative, absolute or fixed vaue for position.
Set position:relative of div circle and z-index:2 ie. 1 more than border is enough
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
Snippet
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Try like this:
.circle {
background-color: #fff;
border: 3px solid red;
border-radius: 11px;
display: block;
height: 22px;
margin: 0 auto;
position: relative;
top: -68px;
width: 22px;
}
.border {
border-right: thin solid black;
height: 100px;
width: 50%;
}