What i need to do is on image below:
I do not want use SVG at all. I think it is two divs with border-radius 50%. But how I merge them like on image? Can you solve this or give an advice?
This is a simpliest way to do it, may be you can improve it for your needs
#main {
width: 80px;
border-radius: 50%;
height: 80px;
border: 3px solid blue;
}
#background {
background: grey;
border-radius: 50%;
width: 100%;
height: 100%;
position: relative;
z-index: 2;
}
#small {
background: grey;
width: 30px;
border-radius: 50%;
height: 30px;
border: 3px solid blue;
margin-top: -30px;
margin-left: 50px;
}
<div id="main">
<div id="background"></div>
</div>
<div id="small"></div>
Related
I have, again, met a complication. And again, this is probably one a novice could bypass, but I can't.
Basically, what I'm trying to do:
Get the green div under the red div
Have the bottommost divs go up with it
Have a border of 4px be between every div
An example based off of this fiddle would be nice.
There object properties with which you can define the position from an object.
For example: "absolute" and "relative" https://www.w3schools.com/css/css_positioning.asp
.red {
height: 200px;
width: 150px;
background-color: red;
border: solid white 4px;
position: relative;
}
.green {
height: 60px;
width: 150px;
background-color: green;
border: solid white 4px;
margin-top: 102px;
}
.verypurple {
height: 60px;
width: 200px;
background-color: darkviolet;
border: solid white 4px;
}
.yellow{
height: 60px;
width: 150px;
background-color: yellow;
border: solid white 4px;
position: absolute;
margin-left: 154px;
}
.purple{
height: 130px;
width: 150px;
background-color: purple;
border: solid white 4px;
position: absolute;
margin-left: 154px;
margin-top: 40px;
}
.blue{
height: 130px;
width: 150px;
background-color: blue;
border: solid white 4px;
position: absolute;
margin-left: 154px;
margin-top: 174px;
}
.darkbrownish{
height: 60px;
width: 70px;
background-color: gray;
border: solid white 4px;
position: absolute;
margin-left: 204px;
margin-top: 378px;
}
<html>
<head></head>
<body>
<div class="yellow">
yellow
</div>
<div class="purple">
purple
</div>
<div class="blue">
blue
</div>
<div class="darkbrownish">
dark<br>
brownish
</div>
<div class="red">
red
</div>
<div class="green">
green
</div>
<div class="verypurple">
very purple
</div>
</body>
</html>
You could use Masonry for your layout.
.masonry { /* Masonry container */
column-count: 2;
column-gap: 4px;
}
.item { /* Masonry bricks or child elements */
display: inline-block;
margin: 0 0 4px;
width: 100%;
}
See here for more details.
in the div of green just add margin-top as :
margin-top:-84px
as i have experimented it on your fiddle and it's working
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I would like to achieve something like this (Puttings the cercle and triangle in the borders of an html block).
Here's the css of my block:
.block {
color: red;
}
.cercle {
border-radius: 50%;
}
.triangle {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid red;
}
What you need to do is use absolute positioning, and instead of using borders use the CSS3's transform property.
Try this as an example:
.box {
padding: 50px;
border: 1px solid black;
display: inline-block;
}
.block {
background: red;
height: 100px;
width: 200px;
display: inline-block;
float: left;
position: relative;
border: 2px solid #880015;
}
.circle {
border-radius: 50%;
position: absolute;
width: 25px;
height: 25px;
background: red;
top: -12px;
right:-2px;
border: 2px solid #880015;
border-bottom: 0;
border-left: 0;
}
.triangle {
background: red;
position: absolute;
width: 20px;
height: 20px;
top: 5px;
right: -12px;
transform: rotate(45deg);
border: 2px solid #880015;
border-bottom: 0;
border-left: 0;
}
<div class="box">
<div class="block">
<div class="circle"></div>
<div class="triangle"></div>
</div>
</div>
Have a look at this article, it explains some of the features you are trying to achieve, but it involves solid images, rather than css only.
As a simpler solution, I suggest you to try with a DIV inside a DIV, and have all the content and the simple border in the inner div, and the custom elements (cercle, triangle) inside the outer div.
I made an example with an cicle, from here it should be easy enough to add other shapes.
html
<div class="wrapper">
<div class="square">
<div class="circle"></div>
</div>
</div>
css
.wrapper {
margin: 25px;
}
.square {
width: 300px;
height: 100px;
border: 5px solid red;
}
.circle {
width: 50px;
height: 50px;
border-radius: 50px;
background-color: pink;
position: absolute;
margin-left: 275px;
margin-top: -25px;
}
See https://jsfiddle.net/b8dthdwn/3/
You will need to use some HTML code first.
something like:
<div class="block">4
<div class="circle"></div>
<div class="triangle"></div>
</div>
And here is the CSS code:
.block {
background: red;
display: block;
width: 180px;
height: 90px;
}
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
position: fixed;
top: 0.3px;
left: 170px;
z-index: 9999;
background: #000;
}
.triangle {
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left:10px solid blue;
position:fixed;
top: 10px;
left: 187px;
}
You can use position: fixed to set the element position with top, left.
You can use z-index to make things to display above each other...
see example on jsbin
So i wanted to create a responsive trapezoid where you can apply a border and a background colour to it
I already created one using 3 div blocks but i cant get the border at the top of the trapezoid to stay inline when the width and height is changed
So my question is either.
can someone help me figure out how to keep the line at the top of the trapezoid in line with the left and right border
or if anybody knows of a different solution?
Here is my code....
.trapezoid-container{
position: relative;
margin-left: 100px;
width: 200px;
height: 200px;
}
.trapezoid {
background: green;
position: relative;
position:absolute;
content:"";
width: 70%;
height: 100%;
border-top: 5px solid black;
border-bottom: 5px solid black;
left: 20px;
}
.trapezoid:before {
background: green;
position:absolute;
content:"";
width: 60%;
height: 100%;
left: 63%;
border-right: 5px solid black;
border-bottom: 5px solid black;
transform: skew(20deg);
}
.trapezoid:after {
background: green;
position:absolute;
content:"";
width: 60%;
height: 100%;
left: -28%;
border-left: 5px solid black;
border-bottom: 5px solid black;
transform: skew(-20deg);
}
<div class="trapezoid-container">
<div class="trapezoid">
</div>
</div>
Thanks guys :)
A better solution found on How to draw a trapezium/trapezoid with css3? Which answers my question, thought id post it
#container {
position: relative;
margin-left: 200px;
width: 200px;
height: 200px;
}
.trapezoid {
position: relative;
width: 30%;
height: 50%;
background: red;
transform: perspective(2px) rotateX(1deg);
border: solid 4px black;
left: 20%;
top: 70%;
}
<div id="container">
<div class="trapezoid">
</div></div>
I have been tasked with turning this rough idea into a live page.
While I have a basic structure established, I am wondering the best way to go about creating the curved lines that connect the months.
Should I just create images and over lay them?
Is there a way to draw them with some kind of scripting/coding?
Canvas?
I don't know the best way to do this.
I just put this together to show you that it is very possible and there are probably other ways to do it.
#upper-line {
border: solid 1px #000;
width:80%;
height: 250px;
border-radius: 50%;
left:55px;
border-right: none;
border-top: none;
border-bottom: none;
position: absolute;
top: 100px;
}
#lower-line {
border: solid 1px #000;
width: 80%;
height: 250px;
border-radius: 50%;
top: 340px;
left: -60px;
border-left: none;
border-top: none;
border-bottom: none;
position: absolute
}
#content-1 {
position: absolute;
left: 180px;
top: 75px;
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
text-align: center;
background-color: orange;
}
#content-2 {
position: absolute;
left: 40px;
top: 200px;
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
text-align: center;
background-color: #98879A;
}
#content-3 {
position: absolute;
left: 400px;
top: 400px;
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
text-align: center;
background-color: #637DBA;
}
<div id="upper-line"></div>
<div id="lower-line"></div>
<div id="content-1">content 1</div>
<div id="content-2">content 2</div>
<div id="content-3">content 3</div>
Note: This is just an example, you have to put in a little work to get it to work for you. The code could be even cleaner.
See how it works on fiddle
You should try SVG.
JsPlumb its a great library to make connections between elements.
http://jsplumb.org
I know how to use border-(bottom|top)-(left|right)-radius: XX;
is there any way to create a curve that changes direction halfway through?
What about overlaying one <div> on top of another like this:
<div class="outer">
<div class="inner-bottom"></div>
<div class="inner-top"></div>
</div>
CSS:
div.outer {
position: relative;
}
div.inner-top {
position: absolute;
width: 200px;
height: 100px;
background-color: #ABC;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
div.inner-bottom {
position: absolute;
width: 200px;
height: 80px;
top: 10px;
background-color: #ABC;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
Fiddle