I need a pointer on a world map as shown in below image:
I was able to create a circle using HTML/CSS and here is the one I created:
.circle {
border-radius: 50%/50%;
width: 50px;
height: 50px;
background: black;
}
http://jsfiddle.net/sreeram62/8QRAJ/
Now I need 2 lines intersected along with image as shown in above image. Is it possible using html/css?
Thanks
You can use the pseudoelements :after and :before like in this example
This is fully supported by all major browsers (IE9+) as shown here
.circle {
border-radius: 50%/50%;
width: 50px;
height: 50px;
background: black;
position: relative;
top: 200px;
left: 50%;
}
.circle:after {
content: '';
display: block;
height: 1px;
width: 300px;
position: absolute;
top: 50%;
left: -125px;
background-color: #f00;
}
.circle:before {
content: '';
display: block;
height: 300px;
width: 1px;
position: absolute;
left: 50%;
top: -125px;
background-color: #f00;
}
Related
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>
I am looking for a way of creating a "Spiral" in CSS.
Here is an image to make it a bit more clear what I am trying to achieve:
So a partial circle with an outline that gets bigger.
Ideally I want to be able to set the length of the Spiral. (from (0) to 360°)
Also it would be nice to place a cricle at the end (just like in my sample)
Here is a codesnippet of what I came up so far.
* {margin: 0; padding: 0;}
div {
box-sizing: border-box;
width: 200px; height: 200px;
margin: 0 auto;
background: #fff;
border-top: 30px solid #fd0;
border-right: 40px solid #fa0;
border-bottom: 60px solid #f50;
border-left: 0 solid blue;
border-radius: 50%;
position: relative;
}
div::after { /* kreis */
content: "";
position: absolute; top: 80%; left: 8%;
width: 90px; height: 90px;
background: red;
border-radius: inherit;
}
div::before { /* hide the stuff that is too much. */
content: "";
position: absolute; top: 50%; left: 0;
width: 50px; height: 100%;
background-color: inherit;
}
<div></div>
I would also accept an svg way of doing this.
this what i came up with some tweaking Css and html i guess it similar to the image DEMO Not tested on IE not sure whether responsive it is
.spiral{
background-color:black;
width: 100px;
height:100px;
border-radius:50%;
}
.spiral:before{
content: '';
width: 27px;
height: 43px;
background-color: white;
position: absolute;
border-top-right-radius: 144px;
border-bottom-left-radius: 61px;
border-bottom-right-radius: 88px;
left: 53px;
top: 25px;
}
.spiral:after{
content: '';
width: 68px;
height: 52px;
background-color: white;
position: absolute;
left: 4px;
top: -11px;
transform: rotateZ(200deg);
}
<div class="spiral"></div>
Im using an image sprite with transparency which im applying to pseudo content. I need a coloured rounder border around the image.
This is what I have so far:
http://codepen.io/anon/pen/bpmGaz
<div class="icon"></div>
.icon:after {
content: "";
display: inline-block;
background-color: gold;
background-image: url(http://orig00.deviantart.net/1110/f/2014/143/9/b/mega_man_hd_sprites__transparent_background__by_lunodevan-d7jgruq.png);
background-position: -129px -40px;
height: 100px;
width: 100px;
}
.icon {
margin: auto;
margin-top: 100px;
position: relative;
width: 100px;
}
.icon:before {
content: "";
display: inline-block;
background: gold;
position: absolute;
top: -50px;
left: -50px;
width: 200px;
height: 200px;
z-index: -1;
border-radius: 100%;
}
However I need it to look like this:
I can do this with additional pseudo content (see below) but the code is getting a bit messy. Is there a shorter way to do this?
http://codepen.io/anon/pen/VaEwQy
.icon:after {
content: "";
display: inline-block;
background-color: gold;
background-image: url(http://orig00.deviantart.net/1110/f/2014/143/9/b/mega_man_hd_sprites__transparent_background__by_lunodevan-d7jgruq.png);
background-position: -129px -40px;
height: 100px;
width: 100px;
}
.icon {
margin: auto;
margin-top: 100px;
position: relative;
width: 100px;
}
.icon:before {
content: "";
display: inline-block;
background: gold;
position: absolute;
top: -50px;
left: -50px;
width: 200px;
height: 200px;
z-index: -1;
border-radius: 100%;
}
I tried using the outline property however sadly it doesn't work cross browser with border-radius.
Adding this code to your pseudo-element seems to do the trick:
border: 50px solid gold;
border-radius: 100%;
http://codepen.io/anon/pen/aNRzmE
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
Please take a look at this image:
I apologise for my useless paint ability :-)
How can I draw that sort of shape in css, like a ) without the use of text in a div, just pure css.
I have tried to make it curved like in the example, but I don't know how to curve it like that from the center.
What must I do to make this kind of shape in css?
Thanks.
Here's one approach to implementing this, but note that any text in this element isn't going to maintain the illusion of a curve. So I'm unsure as to how useful this would be to you, but as you don't specify your use-case, it seemed worth posting as, perhaps, it might be of use in some way. If only as an idea for how you might proceed:
#box {
display: block;
margin: 2em auto;
width: 10em;
height: 5em;
background-color: black;
position: relative;
}
#box:before {
position: absolute;
top: -1em;
left: 0;
right: 0;
height: 2em;
background-color: #fff;
content: ' ';
border-radius: 50%;
}
#box:after {
position: absolute;
bottom: -1em;
left: 0;
right: 0;
height: 2em;
background-color: #000;
content: ' ';
border-radius: 50%;
}
JS Fiddle demo.
Your example appears to resemble a chevron shape, forgive me if that's not the case, but if it is you are in luck because you can make a chevron shape using pure CSS.
.chevron {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 200px;
}
.chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: black;
transform: skew(0deg, 6deg);
}
.chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: black;
transform: skew(0deg, -6deg);
}
<div class="chevron"></div>
You can find the original example and some other shapes here