This question already has answers here:
Easier way to create circle div than using an image?
(15 answers)
Closed 8 years ago.
i want to create a div with background color red and completely circular in shape
How can i do that?
Css or jquery both can be used
You can do following
FIDDLE
<div id="circle"></div>
CSS
#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
Other shape SOURCE
By using a border-radius of 50% you can make a circle.
Here is an example:
CSS:
#exampleCircle{
width: 500px;
height: 500px;
background: red;
border-radius: 50%;
}
HTML:
<div id = "exampleCircle"></div>
Demo
css
div {
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
}
html
<div></div>
HTML div elements, unlike SVG circle primitives, are always rectangular.
You could use round corners (i.e. CSS border-radius) to make it look round. On square elements, a value of 50% naturally forms a circle. Use this, or even a SVG inside your HTML:
document.body.innerHTML+='<i></i>'.repeat(4);
i{border-radius:50%;display:inline-block;background:#F48024;}
svg {fill:#F48024;width:60px;height:60px;}
i:nth-of-type(1n){width:30px;height:30px;}
i:nth-of-type(2n){width:60px;height:60px;}
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<circle cx="60" cy="60" r="60"/>
</svg>
Use a border-radius property of 50%.
So for example:
.example-div {
border-radius: 50%
}
.circle {
border-radius: 50%;
width: 500px;
height: 500px;
background: red;
}
<div class="circle"></div>
see this FIDDLE
Related
I recently used a clip-path to do a decorative image cropping. I created a mask in Inkscape and "ripped" it out of the final svg path, and it worked, except that the mask doesn't stretch to the image size, but stays to the view-box size, since the coordinates in the path are absolute.
section {
width: 320px;
height: 320px;
border: 1px solid black;
}
#clipme {
width: 100%;
height: 100%;
background-color: #FF8864;
clip-path: path('m8.3634 9.8309c68.284-6.1882 39.013 12.331 80.804-1.0687 6.0561-1.9419 18.525 0.77696 32.616 1.0687-19.889 102.68 18.582 69.02 0 110.1-42.039-3.5946-82.783-33.22-113.42 0-27.365-85.399 32.654-92.947 0-110.1z');
}
<section>
<div id='clipme'/>
</section>
Is it possible to fix this at the css level? Maybe there are tools that can convert absolute values to relative values? And since I mentioned inkscape, maybe I can configure it there?
Use it as mask instead. Put the path inside an SVG with the correct viewBox then load it like an image. Resize the section element to see the effect
section {
width: 320px;
height: 320px;
border: 1px solid black;
overflow: auto;
resize: both;
}
#clipme {
width: 100%;
height: 100%;
background-color: #FF8864;
-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 130 130"><path d="M8.3634 9.8309c68.284-6.1882 39.013 12.331 80.804-1.0687 6.0561-1.9419 18.525 0.77696 32.616 1.0687-19.889 102.68 18.582 69.02 0 110.1-42.039-3.5946-82.783-33.22-113.42 0-27.365-85.399 32.654-92.947 0-110.1zz"></path></svg>' ) center/contain no-repeat
}
<section>
<div id='clipme'></div>
</section>
This question already has answers here:
Responsive CSS Trapezoid Shape
(2 answers)
Putting an image inside a basic trapezoid done with pure CSS?
(1 answer)
Closed 2 years ago.
I'm confused about how can I transform the corners in one side (top or bottom) only something like below:
Normal:
Transformed:
Can anyone please help me on this? Here, the top corners stay same and the bottom corners are transformed. How can I achieve this?
You can start with something like this, clean and simple without multiple divs.
#trapezium {
width: 200px;
height: 100px;
margin: 50px;
transform: perspective(100px) rotateX(-45deg);
background-color: gray;
}
<div id='trapezium'></div>
you can have similar output using perspective and transform: rotateX(-45deg); CSS attribute, here is a working snippet:
.scene {
position: relative;
left:100px;
width: 200px;
height: 200px;
margin: 40px;
/* perspective property */
perspective: 400px;
}
.panel {
width: 100%;
height: 100%;
background: blue;
transform: rotateX(-45deg);
}
<div class="scene">
<div class="panel"></div>
</div>
I am newbie in css world and I am trying to make responsive design like this using bootstrap,css and html5.
but ended up like this.
how to create same curve in div displaying in image 1?
Note : Red color in second image is for better explanation.I have to apply white color anyway
You should use percentage to define the border-radius, in this way the curve will look like the one you want.
border-radius: 100%
http://codepen.io/FezVrasta/pen/XKvkJX?editors=1100
To get curved edges use border-radius, the background can be achieved with linear-gradient
jsfiddle: https://jsfiddle.net/ojhcbepz/
html, body {
height: 100%;
}
div.outer {
width: 600px;
height: 250px;
background: linear-gradient(to bottom,blue 50%,red 0px);
padding: 20px 0;
overflow: hidden;
}
div.inner {
height: 100%;
border-radius: 50%;
background: white;
margin: 0 -50px;
}
<div class="outer">
<div class="inner">
</div>
</div>
well a simple solution maybe... use a small red dot image and repeat it in outer div and inner div has border-radius: 50%
<div style="background-image: red url("http://i.imgur.com/dXis68u.png") repeat;">
<div style="background-color: white; border-radius: 50%; text-align:center;" >
ABCDEFGH
</div>
</div>
(You can add two 's of height as you want to get those top and bottom borders)
This question already has answers here:
Transparent arrow/triangle indented over an image
(4 answers)
Closed 5 years ago.
Sorry if this has been answered but I can't find it anywhere!!
I need a transparent triangle cut out of a white div (to form a down arrow), I get that it could be css shapes to do it, but the thing I'm stumped on is how to create two 100% width white blocks on either side...
Like this:
Any help would be great.
Many thanks
Now you've provided an image, I'll change my answer to what you actually want.
The trick I'd use is to create :before and :after elements that are absolutely positioned, one left and one right. Each one has borders to create the shapes. The key to this is the box-sizing trick which means that the borders are inside the width, rather than added onto, allowing us to define a 50% width for the :before and :after pseudo elements.
Note that the image I'm using as the background in this demo is rectangular, it doesn't have the triangle in the image!
HMTL
<div class="box">
I'm a box.
</div>
CSS
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.box {
background: transparent url('http://i.imgur.com/ipGvBz0.png') no-repeat;
padding: 20px;
min-height: 200px; /* Just to show the image */
margin: 10px;
position: relative;
}
.box:before,
.box:after {
content: '';
display: block;
position: absolute;
bottom: 0;
width: 50%;
border-bottom: 20px solid white;
}
.box:before {
left: 0;
border-right: 20px solid transparent;
}
.box:after {
right: 0;
border-left: 20px solid transparent;
}
DEMO
Nota bene:
The original wording of the question was somewhat ambiguous so this answer isn't exactly spot-on.
Regardless, it's still widely applicable for many similar situations.
The general idea can easily be demonstrated with SVG.
The details of the execution are up to your specific situation and you will need to change them accordingly.
See a Jsfiddle example
SVG images can also be used as background-images if your situation requires that. Alternatively you can hack it by positioning the existing div absolutely and z-indexing it.
See this guide on how to build SVG shapes like the one below: SVG path element on Jenkov.com
See this article for information on SVG fill principles: SVG fill on Jenkov.com
HTML used in the sample:
<div id="your_div">
<svg id="back" viewBox="0 0 100 10" preserveAspectRatio="none">
<path d="M 0,0 L 100,0 100,10 0,10 0,0 M 50,8 L 55,6 52,6 52,2 48,2 48,6 45,6 z" style="fill: white; fill-rule: evenodd;"></path>
</svg>
</div>
CSS used in the example:
body {
background-image: url(http://i.imgur.com/XxGffrU.jpg);
background-size: cover;
background-position: center bottom;
min-height: 1000px;
margin: 0;
}
#your_div {
position: fixed;
top: 30%;
width: 90%;
left: 5%;
height: 100px;
}
#back {
width: 100%;
height: 100%;
}
Disclaimer: I'm not affilated with the linked webpage in any way, they merely have comprehensive guides on the subject.
You can use a relatively positioned wrapper and use left:50%; and margin-left:-(half of div width here) in the triangle CSS, as you can see here:
CSS:
.wrapper{
position:relative;
width:50px; /* Same width as .black */
}
.black{
background:black;
width:50px;
height:25px;
}
.triangle {
position:absolute;
width: 0;
height: 0;
border-left: 5px solid transparent; /* Half of triangle width */
border-right: 5px solid transparent; /* Half of triangle width */
border-top: 5px solid black; /* Triangle height */
border-bottom: 0px solid transparent;
left:50%;
margin-left:-5px; /* Half of triangle width */
}
HTML:
<div class="wrapper">
<div class="black"></div>
<div class="triangle"></div>
</div>
Simple demo
Styleful demonstration with text inside div
What's the best way (if any) to make the inside box transparent so the image can be seen with no opacity (clear image) and the rest of the outer box opaque. So far this is what I'm doing:
<style>
#a {
background-color: black;
float: left;
} #b {
opacity : 0.4;
filter: alpha(opacity=40);
} #div {
position: absolute;
height: 30px;
width: 30px;
top: 90px;
left: 90px;
border: 1px solid #FFF;
background: transparent;
}
</style>
<div id="a">
<div id="b">
<img src="http://clagnut.com/images/ithaka.jpg" />
</div>
</div>
<div id="div"></div>
Any ideas? thx
The maximum opacity of an element is the opacity of its parent element. So if div#b has an opacity of 40%, if his children have 100% opacity in style they will also be 40% absolute opacity.
To accomplish what you're describing (at least what I think you're describing), one way could be to have both the transparent wrapper and the image children of a parent div with relative positioning. You can absolutely position both of the children inside of that wrapper so that the image shows up on top of the transparent box.
Edit: Here is the code for the effect you are describing. My example has a 480 x 320 image, and a 30-pixel border:
<style>
#back {background-image:url(mypicture.jpg);
width:480px;
height:320px;
position:relative;}
#middle {position:absolute;
width:480px;
height:320px;
background-color:#000;
opacity:0.4;
filter:alpha(opacity=40);
top:0;
left:0;}
#front {position:absolute;
width:420px; /* 30px border on left & right */
height:260px; /* 30px border on top & bottom */
background-image:url(mypicture.jpg);
background-position:-30px -30px; /* compensate for the border */
top:30px;
left:30px;}
</style>
<div id="back">
<div id="middle">
</div>
<div id="front">
</div>
</div>
If I understand you correctly, try using just one div (i.e. get rid of the outer one with ID "a") and setting a colored border around it. Or you could get more flexibility by "faking" a border using 4 divs for the left, right, top, and bottom edges and 4 more for the corners.
It's kind of hard to know what you mean without an example page, or screenshots of what you expect and what you're actually getting.
EDIT: I was about to edit in basically the same thing Rex M wrote. Here's another (although idealistically inferior) way to do it:
<style>
#a {
float: left;
position: relative;
}
div.overlay {
opacity: 0.4;
background-color: black;
position: absolute;
}
#t {
left: 0; top: 0; height: 90px; width: 450px;
}
#b {
left: 0; top: 120px; height: 218px; width: 450px;
}
#l {
left: 0; top: 90px; height: 30px; width: 90px;
}
#r {
left: 120px; top: 90px; height: 30px; width: 330px;
}
</style>
<div id="a">
<div id="t" class="overlay"></div>
<div id="b" class="overlay"></div>
<div id="l" class="overlay"></div>
<div id="r" class="overlay"></div>
<img src="http://clagnut.com/images/ithaka.jpg">
</div>
If you want to be sure that the images have a certain color for a background, you could just as well stick a background to all IMG-elements in your stylesheet:
div#a img { background: #FFF; }
Anyhow, the filter-property in CSS should not be relied upon, as it is not part of the official specifications for CSS 2.1.
I might have misunderstood the question, though. Could you rephrase it or provide pictures of expected results?
To follow on what Rex M said, you'll need to change things so that the non-transparent elements aren't children of the transparent elements.
You can use absolute or relative positioning to line up your "border" with the picture, although this can often have inconsistencies between browsers.
The most painless way off the top of my head is to use javascript to get the top and left pixel locations of the image and set the top/left css properties of the border to match (and set the size of the border to that of the image).
UPDATE:
The asker showed an example of what he is trying to recreate. In the example linked, the shaded areas (the "not selected" area) of the picture is created by 4 divs.
The top and bottom divs are the full width of the image, and are set to have a height that is the difference between the top/bottom of the selection box and the top/bottom of the image respectively.
The side divs have height and width modified so that they fill in the "side areas" of the image.
The sizes are updated via a mousemove event.