Is there any variant to draw a circular segment using just CSS/CSS3?
I need that green part of circle.
I was trying this:
div {
width: 86px;
height: 22px;
background-color: green;
border-bottom-right-radius: 42px;
border-bottom-left-radius: 42px;
}
<div></div>
But it doesn't look like a circular segment.
The width and height of the div should be same to produce a circle.
eg: http://jsfiddle.net/wGzMd/
Here is the css:
div{
position: absolute;
top: 50px;
left: 50px;
width:100px;
height:100px;
border: 1px solid green;
background: green;
border-radius: 360px;
}
EDIT (for segment):
http://jsfiddle.net/wGzMd/3/
CSS:
div.outerClass{
position: absolute;
left: 50px;
top: 50px;
height: 25px;
overflow: hidden;
}
div.innerClass{
width:100px;
height:100px;
border: 1px solid green;
border-radius: 360px;
}
HTML:
<div class="outerClass"><div class="innerClass"></div></div>
Hey check to this site http://css-tricks.com/examples/ShapesOfCSS/
and this http://www.russellheimlich.com/blog/pure-css-shapes-triangles-delicious-logo-and-hearts/
and this
http://www.css3shapes.com/
Css
#oval {
width: 86px;
height: 22px;
background: green;
-moz-border-radius: 50px / 25px;
border-radius: 100px 100px 0 0 / 47px;
-webkit-border-radius: 100px 100px 0 0 / 47px;
}
HTML
<div id="oval"></div>
Live demo http://jsfiddle.net/carTT/
and create any shape in pure css as like you .................
Half circle:
http://www.paulund.co.uk/how-to-create-different-shapes-in-css
div {
height:45px;
width:90px;
border-radius: 0 0 90px 90px;
-moz-border-radius: 0 0 90px 90px;
-webkit-border-radius: 0 0 90px 90px;
background:green;}
Related
I have CSS code
#box {
width: 200px;
height: 50px;
background-color: blue;
border-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;
position: relative;
margin: 30px;
text-align: center;
color: white;
padding-top: 10px;
}
#box::before,
#box::after {
content: "";
width: 0;
height: 0;
right: 0;
position: absolute;
}
#box::before {
border-right: 10px solid blue;
border-top: 10px solid blue;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
bottom: -20px;
}
#box::after {
border-right: 10px solid blue;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid blue;
position: absolute;
top: -20px;
}
<div id="box">#box</div>
which gives some shape like
shape I need is
I need curved line instead of hypotenuse in triangles at top-right (#box::before) and bottom-right (#box::after) as in image.
Is there any way to achieve using pure CSS ?
codesandbox demo
Thanks
You can create a concaved radius using the box-shadow property.
This technique creates a transparant square with overflow hidden.
It then creates a transparant circle with a box shadow.
We then adjust the position of the circle to only view 1 quarter of
it.
SNIPPET
#box {
position: relative;
width: 200px;
height: 50px;
background-color: blue;
border-radius: 9999px 0 0 9999px;
margin: 30px;
text-align: center;
color: #fff;
padding-top: 10px;
}
#top,
#bottom {
position: absolute;
height: 30px;
width: 30px;
right: 0;
overflow: hidden;
}
#top {
top: -30px;
}
#bottom {
bottom: -30px;
}
#top::before,
#bottom::before {
content: '';
position: absolute;
right: 0;
height: 200%;
width: 200%;
border-radius: 100%;
box-shadow: 10px 10px 5px 100px blue;
z-index: -1;
}
#top::before {
top: -100%;
}
<div id="box">
<div id="top"></div>
#box
<div id="bottom"></div>
</div>
You can easily achieve this by using svg background images like in this snippet. Here the curves may not the way you want but surely you can change the path in the svg to your needs.
#box {
width: 200px;
height: 50px;
background-color: blue;
border-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;
position: relative;
margin: 30px;
}
#box::before,
#box::after {
content: "";
width: 20px;
height: 20px;
right: 0;
position: absolute;
}
#box::before {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path fill="blue" d="M0 0 Q20 0 20 20 L20 0Z" /></svg>');
bottom: -20px;
}
#box::after {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path fill="blue" d="M0 20 Q20 20 20 0 L20 20Z" /></svg>');
top: -20px;
}
<div id="box"></div>
Can you use negative space? You could have a container with the same background color as your shape, then round the corners surrounding elements to create the illusion.
.container {
background-color: blue;
width: 100%;
}
.negat {
background-color: white;
height: 100px;
}
.posit-bg {
background-color: white;
}
.posit {
background-color: blue;
height: 100px;
border-radius: 50px 0px 0px 50px;
}
.top {
border-radius: 0px 0px 50px 0px;
}
.bot {
border-radius: 0px 50px 0px 0px;
}
<div class="container">
<div class="negat top"></div>
<div class="posit-bg">
<div class="posit"></div>
</div>
<div class="negat bot"></div>
</div>
#box{
width:200px;
height:50px;
background-color:blue;
color:#ffffff;
text-align:center;
padding-top:30px;
border-radius:9999px 0 0 9999px;
}
.sq{
width:25px;
height:25px;
background-color:blue;
}
#sq1,#sq2,#sq11,#sq22{
border-radius:-999px;
margin-left:175px;
}
.sq1{
background-color:#ffffff;
height:25px;
width:25px;
}
#sq11{
border-bottom-right-radius:9999px;
margin-bottom:-25px;
position: relative;
z-index:1;
}
#sq22{
border-top-right-radius:9999px;
margin-top:-25px;
position: relative;
z-index:1;
}
<div class="sq1" id="sq11"></div>
<div class="sq" id="sq1"></div>
<div id="box">#box</div>
<div class="sq" id="sq2"></div>
<div class="sq1" id="sq22"></div>
I need some CSS help. It’s hard to explain, but looking at the snippet I need the black part without the red.
I used two elements, but it should be possible with one...
.q-rounder {
background: #222;
width: 15px;
height: 15px;
}
.quarter-circle {
width: 15px;
height: 15px;
background: red;
border-radius: 100px 0 0 0;
-moz-border-radius: 100px 0 0 0;
-webkit-border-radius: 100px 0 0 0;
}
<div class="q-rounder">
<div class="quarter-circle"></div>
</div>
(fiddle)
Use a radial gradient as background
.q-rounder {
background:
radial-gradient(farthest-side at bottom right,transparent 94%, #222);
width: 15px;
height: 15px;
}
<div class="q-rounder">
</div>
Another syntax with the at to have better support (safari doesn't support the at)
.q-rounder {
background:
radial-gradient(farthest-side,transparent 94%, #222) top left/200% 200%;
width: 15px;
height: 15px;
}
<div class="q-rounder">
</div>
If you can use a solid background color, maybe this fits for you?
basicaly the before elements lays behind an rectangle which has border-radius an a solid background-color.
Supported in every browser and version.
.q-rounder {
position: relative;
background: white;
width: 15px;
height: 15px;
border-radius: 100px 0 0 0;
}
.q-rounder:before {
position: absolute;
left: 0;
top: 0;
width: 15px;
height: 15px;
background: black;
content: "";
z-index: -1;
}
<div class="q-rounder">
</div>
How can I achieve this shape with CSS:
Ideally, I'd like a background shadow effect too.
You can do this with CSS but it realy isn't the best way to make it. It will need to add unsemantic markup, and probably a lot of CSS.
If you don't want to use an image, I would suggest to use an inline SVG it is much better to control shapes like the one you are trying to achieve.
With SVG:
I made this quick example using a path element with arc commands :
svg{
display:block;
width:30%; height:auto;
}
body{background:url('http://i.imgur.com/qi5FGET.jpg');background-size:cover;}
<svg viewbox="0 0 10 10">
<path d="M4.5 1 A4.05 4.05 0 0 0 4.5 9z M8.4 3 A4.05 4.05 0 0 0 5.5 1 V9 A4.05 4.05 0 0 0 8.4 7"
stroke-width="0.8" fill="transparent" stroke="#000"/>
</svg>
With CSS :
I also made this CSS example with a possible approach if you really want to go with CSS. It uses only one div and two pseudo elements. The lines are made with borders and border-radius :
div {
position: relative;
width: 100px;
padding-bottom: 100px;
border-radius: 50%;
}
div:before,div:after {
box-sizing: border-box;
content: '';
width: 48%;
height: 100%;
position: absolute;
border: 10px solid #000;
}
div:before {
border-radius: 900px 0 0 900px;
}
div:after {
right: 0;
border-radius: 0 35px 35px 0;
border-right-color:transparent;
}
body{background:url('http://i.imgur.com/qi5FGET.jpg');background-size:cover;}
<div></div>
One CSs posibility
.test {
width: 200px;
height: 200px;
border: solid 10px black;
border-radius: 50%;
border-right-color: transparent;
background-image: linear-gradient(90deg, transparent 85px, black 85px, black 115px, transparent 115px);
position: relative;
}
.test:after {
content: "";
position: absolute;
left: 0;
right: 0;
width: 10px;
margin: auto;
background-color: white;
top: -10px;
bottom: -10px;
}
<div class="test"></div>
Here is another CSS alternative which just uses a single pseudo element to create the extra side of the shape.
The after creates the extra curve with a partially transparent border (the right side).
body {
background: skyblue;
}
div {
width: 50px;
height: 100px;
border: 10px solid black;
border-radius: 75px 0px 0px 75px;
position: relative;
box-sizing: border-box;
}
div:after {
content: '';
top: -10px;
width: 50px;
height: 100px;
border-width: 10px;
border-style: solid;
border-right-color: transparent;
border-radius: 0px 39px 39px 0px;
position: absolute;
left: 45px;
box-sizing: border-box;
}
<div></div>
Consider the following -
#banner {
width: 100%;
height: 50px;
box-shadow: 0 0 10px #000000;
background: #63B0F2;
}
#circle {
position: relative;
top: 20px;
height: 80px;
width: 80px;
margin: 0 auto;
border-radius: 50%;
box-shadow: 0 0 10px #000000;
background-color: white;
}
<div id="banner">
<div id="circle">
</div>
</div>
Is it possible to remove/clip the drop-shadow cast by the top half of the white square onto the blue div?
To put it another way, so there is only shadow cast onto the background, but not each other?
Possible solution with pseudo-elements :before and :after. Just add to your CSS:
#circle:before{
position: absolute;
content: "";
width: 150%;
height: 50%;
left: -25%;
top: -10px;
background: #63B0F2;
}
#circle:after{
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background: white;
border-radius: 50%;
}
DEMO
Add a second element for the shadow and position it behind the banner using z-index.
.shadow,
.circle {
display: block;
height: 120px;
width: 120px;
position: absolute;
bottom: -100%;
left: calc(50% - 62px);
border-radius: 50%;
}
.shadow {
box-shadow: 0 0 1em -.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10, 10, 10, .2);
border: 2px solid transparent;
z-index: -1;
}
.circle {
background: #e0e0e0;
border: 2px solid white;
}
See this codepen, in which I have used ridiculous colors to illustrate my point: https://codepen.io/pen/?editors=0100
This question already has answers here:
div set height equal
(4 answers)
Closed 8 years ago.
this is my html of my little game.
<div id="game">
<div id="choice" onmouseover="npcRoll()">
<p>Chosse your weapon!</p>
<button id="rock" onClick="choose(1)">Rock</button>
<button id="paper" onClick="choose(2)">Paper</button>
<button id="scissors" onClick="choose(3)">Scissors</button>
<p>You chose <span id="userChoice">none</span>!</p>
</div>
<div id="confirm">
<p>When you are ready, click on <strong>Fight</strong>.</p>
<button id="resulot" onClick="resulte()">Fight!</button>
</div>
<div id="clear"></div>
</div>
And this is my CSS
body {
background-color: #DFEFF0;
text-align: center;
}
button {
font-size: 22px;
border: 2px solid #87231C;
border-radius: 100px;
width: 100px;
height: 100px;
color: #FF5A51;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
padding-top: 36px;
}
button:active {
font-size: 22px;
border: 2px solid #328505;
color: #32A505;
border-radius: 100px;
width: 100px;
height: 100px;
padding-top: 36px;
}
#rock {
width: 100px;
height: 100px;
background-color: white;
background-image: url(img/rock.png);
background-repeat: no-repeat;
background-size: 80px 80px;
background-position: center center;
}
#paper {
width: 100px;
height: 100px;
background-color: white;
background-image: url(img/paper.png);
background-repeat: no-repeat;
background-size: 80px 80px;
background-position: center center;
}
#scissors {
width: 100px;
height: 100px;
background-color: white;
background-image: url(img/scissors.png);
background-repeat: no-repeat;
background-size: 80px 80px;
background-position: center center;
}
#result {
background-color: #ECECEC;
border:2px solid gray;
border-radius:25px;
width: 200px;
height: 100px;
}
#choice {
border: 2px solid #87231C;
border-radius: 12px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
background-color: #FF5A51;
width: 350px;
float: left;
}
#game {
border: 2px solid #fff;
border-radius: 15px;
background-color: white;
width: 500px;
margin: 0 auto;
display: block;
overflow: auto;
}
#confirm {
border: 2px solid #00008B;
border-radius: 12px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
background-color: #1E90FF;
width: 142px;
height: 100%;
float: right;
}
#clear {
clear: both;
}
You can check it out here on http://jsfiddle.net/RWfhQ/ . I want to make the blue div to be same size as the red one. I want to make them same size. It's possible that blue div may get bigger than red one, so I need to have them same size.
Thank you very much.
The obvious solution is to use position: relative on #game container and position: absolute on #confirm:
#confirm {
...
position: absolute; // <-- stretch the div
top: 0;
bottom: 0;
right: 0;
}
In this case you don't need height: 100% and float: right anymore.
http://jsfiddle.net/RWfhQ/1/
Since this is a fixed width, you could use the faux-columns trick. Wrap both in a <div> to handle the background, and use a background image which is half blue and half red.