I am trying to make an arc in the right border of a div/panel , please let me know if there are any ways to do it. attached is the snapshot of mockup.
You can reach this effect in CSS. Example below.
.wrap {
position: relative;
width: 100px;
height: 400px;
background-color: pink;
overflow: hidden;
}
.wrap::before {
content:'';
width: 300px;
height: 600px;
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left:-280px;
background-color: tomato;
}
.wrap::after {
content:'';
width: 300px;
height: 600px;
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
margin-top: -280px;
margin-left:-290px;
background-color: white;
}
<div class="wrap">
</div>
Related
In box1:after z-index:1; it does not work.
.box1 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
background-color: gray;
border-radius: 50%;
}
.box1:after {
content: '';
position: absolute;
left: -3.5px;
top: -3.5px;
width: 80%;
height: 80%;
border: 4px solid red;
border-radius: 50%;
z-index: -1;
}
<div class="box1"></div>
Does anyone know what the solution is?
you must to get help of :before, like this:
.box1 {
position: absolute;
left: 50%;
top: 50%;
width: 120px;
height:120px;
transform:translate(-50%,-50%);
}
.box1:before {
text-align: center;
line-height: 120px;
content: 'click';
position: absolute;
width: 100%;
height:100%;
background-color: gray;
border-radius: 50%;
}
.box1:after{
content: '';
position: absolute;
left: -3.5px;
top: -3.5px;
width: 80%;
height: 80%;
border:4px solid red;
border-radius: 50%;
z-index:-1;
}
<div class="box1"></div>
#circle { width: 100px; height: 100px;
position: relative;
background: gray; opacity: .6;
margin: 0 auto;
border-radius: 50%;
z-index: 2;}
#line { display: block; position: relative;
width: 100%; height: 5px;
background: red; top: -50px;
z-index: 1;}
<div id="circle"></div>
<div id="line"></div>
How to make parts of the red line that stay behind the circle invisible? Without changing the opacity of the circle to 1.
You don't need a separate "line" div for this.
body {
overflow: hidden;
background:grey;
}
#circle {
width: 100px;
height: 100px;
position: relative;
background: rgba(0,255,0,0.5); /* semi-transparent green */
opacity: .6;
margin: 0 auto;
border-radius: 50%;
z-index: 2;
}
#circle:before,
#circle:after {
content: '';
position: absolute;
width: 50vw;
top:50%;
height: 5px;
}
#circle:before {
left:0;
transform:translate(-100%,-50%);
background:red;
}
#circle:after {
left:100%;
transform:translate(0,-50%);
background:blue;
}
<div id="circle"></div>
Put a your circle inside a white circle see fiddle https://jsfiddle.net/v61bguns/
HTML
<div id="circle2"><div id="circle"></div></div>
<div id="line"></div>
CSS
#circle2 { width: 100px; height: 100px;
position: relative;
background: white;
margin: 0 auto;
border-radius: 50%;
z-index: 2;}
#circle { width: 100px; height: 100px;
position: relative;
background: gray; opacity: .6;
margin: 0 auto;
border-radius: 50%;
z-index: 3;}
#line { display: block; position: relative;
width: 100%; height: 5px;
background: red; top: -50px;
z-index: 1;}
I want to create the following shape:
Important: if I use "Border Radius" I get this (and I do not want this result):
Here are DEMO
HTML:
<div id="gray">
<div id="red"></div>
</div>
CSS:
#gray{
height: 100%;
background-color: #ccc;
overflow: hidden;
}
#red{
width: 150%;
height: 150%;
background-color: #f00;
border-radius: 100%;
top: 50%;
left: -25%;
right: 0;
position: relative;
}
Something like this would be roughly equivalent:
http://jsfiddle.net/ny4Q9/
css:
.curvetop {
position: relative;
margin-top: 80px;
background: red;
width: 100%;
height: 400px;
z-index: 1;
}
.curvetop:after {
top: -80px;
display: block;
position: absolute;
content: '';
border-radius: 50%;
background: red;
width: 100%;
height: 170px;
}
markup:
<div class="curvetop"></div>
By using border-radius with a value of 50% you can create a circle.. which, as per your question you can attach to the top of another element by way of a pseudo element.
You can use border radius
http://jsfiddle.net/wULyB/
<div id="out">
<div id="in"></div>
</div>
CSS
#out{
width: 100px;
height: 100px;
overflow: hidden;
background: green;
position: relative;
}
#in{
width: 200px;
height: 200px;
border-radius: 100px;
background: black;
position: absolute;
left: -50px;
top: 30px;
}
You can play around with the numbers but you get the idea
I want to make a solar system and I've used two divs around my sun so far; a div to specify the orbit path, and earth, to follow that path. The problem is that I want to place the #earth div onto the #earth-orbit div which has a border-radius of 50%. I've wrapped #earth-orbit around #earth like this:
<div id='sun'>
</div>
<div id='earth-orbit'>
<div id='earth'>
</div>
</div>
Then, in my css I have this so far:
#sun
{
margin: auto;
height: 200px;
width: 200px;
background-color: orange;
position: absolute;
border-radius: 50%;
top: 0; left: 0; bottom: 0; right: 0;
}
#earth-orbit
{
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
position: absolute;
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
height: 500px;
width: 500px;
}
#earth
{
height: 50px;
width: 50px;
background-color: white;
border-radius: 50%;
}
How do I place the #earth onto the curved border of the #earth-orbit?
Edit: It's easy to do it when you're not trying to simultaneously keep the whole system in the middle of the screen
<style>
#sun
{
margin: auto;
height: 200px;
width: 200px;
background-color: orange;
position: absolute;
border-radius: 50%;
top: 0; left: 0; bottom: 0; right: 0;
}
#earth-orbit
{
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
position: absolute;
border-width: 2px;
border-style: dotted;
border-color: blue;
border-radius: 50%;
height: 500px;
width: 500px;
}
#earth
{
position:absolute;
left:130px;
height: 50px;
width: 50px;
background-color: red;
border-radius: 50%;
}
</style>
<div id='sun'>
</div>
<div id='earth-orbit'>
<div id='earth'>
</div>
</div>
If you want just make static image, you can absolute position #earth:
#earth
{
position:absolute;
top: -25px;
height: 50px;
width: 50px;
background-color: white;
border-radius: 50%;
}
and do not forget about:
#earth-orbit
{
top: 25px; left: 25px; bottom: 25px; right: 25px;
position: absolute;
}
I drew a cloud via CSS3 using different div tags I am trying to add a border to the whole shape but I am having trouble since every shape get its own border how can I apply a border to the whole cloud?
HTML:
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c"></div>
<div id="left_c"></div>
</div>
CSS:
* {
margin: 0;
padding: 0;
border: 0;
}
body{
background-color: #4ca3ff;
}
#cloud {
position: absolute;
}
#bottom_c {
position: relative; top: 200px; left: 500px;
width: 350px;
height: 150px;
background-color: #fff;
border-radius: 100px;
border: solid 5px black;
z-index: 100;
}
#right_c{
position: absolute; top: 140px; left: 640px;
width: 150px;
height: 150px;
border-radius: 100%;
background-color: #fff;
border: solid 5px black;
}
#left_c{
position: absolute; top: 170px; left: 550px;
width: 100px;
height: 100px;
border-radius: 100%;
background-color: #fff;
border: solid 5px black;
}
Image:
You can do it without any additional elements. Just use the ::before and ::after pseudo-elements with the same size and round shape as the top cloud bubbles. z-index keeps everything in the right layer.
Demo:
Output:
CSS:
body{
background-color: #4ca3ff;
}
#cloud {
height: 230px;
margin: 40px;
position: relative;
width: 400px;
}
#cloud div {
border: solid 5px black;
}
#bottom_c {
background-color: #fff;
border-radius: 100px;
height: 150px;
position: absolute;
top: 100px;
width: 350px;
z-index: 0;
}
#right_c{
background-color: #fff;
border-radius: 100%;
height: 150px;
left: 140px;
position: absolute;
top: 40px;
width: 150px;
z-index: -1;
}
#left_c{
background-color: #fff;
border-radius: 100%;
height: 100px;
left: 50px;
position: absolute;
top: 70px;
width: 100px;
z-index: -1;
}
#cloud::before {
background-color: white;
border-radius: 50%;
content: '';
height: 100px;
left: 55px;
position: absolute;
top: 75px;
width: 100px;
z-index: 1;
}
#cloud::after {
position: absolute; top: 45px; left: 145px;
background-color: white;
border-radius: 50%;
content: '';
width: 150px;
height: 150px;
z-index: 1;
}
HTML:
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c"></div>
<div id="left_c"></div>
</div>
Thank you for the original solution! I needed to create multiple clouds and dynamically resize and recolor them, so I adapted to original solution as follows:
I made the clouds resizable by using percentages values for the height, width, top and left properties. The .cloud class uses padding-top to adjust the height of the cloud relative to the cloud's width.
I made the :before and :after pseudo-elements divs.
I changed the id selectors to class selectors
And I reorganized the properties so they're easier to read.
I hope this helps someone. Here's the code:
Output
I don't yet have the reputation to post images :/. So here's a link to the output: http://imgur.com/nN9dBiQ
CSS:
.cloud {
position: relative;
width: 100%;
padding-top: 57.5%;
box-sizing: border-box;
}
.cloud_bottom,
.cloud_left,
.cloud_right {
border: solid 5px black;
}
.cloud_bottom,
.cloud_left,
.cloud_right,
.cloud_leftCircle,
.cloud_rightCircle {
background-color: #fff;
}
.cloud_bottom {
position: absolute;
top: 43.48%;
height: 65.2%;
width: 87.5%;
border-radius: 100px;
z-index: 0;
}
.cloud_left {
position: absolute;
top: 30.43%;
left: 12.5%;
height: 43.48%;
width: 25%;
border-radius: 100%;
z-index: -1;
}
.cloud_right {
position: absolute;
top: 17.39%;
left: 35%;
height: 65.2%;
width: 37.5%;
border-radius: 100%;
z-index: -1;
}
.cloud_leftCircle {
position: absolute;
top: 32.61%;
left: 13%;
height: 43.48%;
width: 25%;
border-radius: 50%;
z-index: 1;
}
.cloud_rightCircle {
position: absolute;
top: 23.48%;
left: 35%;
height: 65.21%;
width: 37.5%;
border-radius: 50%;
z-index: 1;
}
HTML:
<div class="firstCloud cloud">
<div class="cloud_bottom"></div>
<div class="cloud_left"></div>
<div class="cloud_right"></div>
<div class="cloud_leftCircle"></div>
<div class="cloud_rightCircle"></div>
</div>
<div class="secondCloud cloud">
<div class="cloud_bottom"></div>
<div class="cloud_left"></div>
<div class="cloud_right"></div>
<div class="cloud_leftCircle"></div>
<div class="cloud_rightCircle"></div>
</div>
JavaScript:
function updateCloudColor(cloudElement, color) {
cloudElement.children().css("background-color", color);
}
$(window).load(function () {
updateCloudColor($(".firstCloud"), "red");
updateCloudColor($(".secondCloud"), "blue");
});