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>
Related
Am working on a design of a card whereby I need to make the red/maroon part bend inwards (from the black part) using css. Please assist?
HTML Markup
<div class="container phonecard2">
</div>
<div class="btm-right">
</div>
CSS code
.container.phonecard2 {
position: relative;
background: #000;
margin-top: 140px;
width: 35%;
height: 260px;
padding: 20px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius: 15px;
}
.btm-right{
position: absolute;
width: 0;
height: 0;
bottom: 0;
right:0;
border-style: solid;
border-width: 0 0 160px 450px;
border-color: transparent transparent #ba0c2f transparent;
}
PNG image of my design after the above code
<div class="container phonecard2">
<div class="btm-right"></div>
</div>
<style>
.container.phonecard2 {
position: relative;
background: linear-gradient(to left, #ba0c2f 70%, #000000 30%);
margin-top: 140px;
width: 600px;
height: 260px;
padding: 20px;
border-radius: 15px;
overflow: hidden
}
.btm-right {
position: absolute;
background: #000;
width: 800px;
height: 680px;
left: -130px;
top: -330px;
border-radius: 0 0 580px 0;
transform: rotate(21deg);
}
</style>
I've been trying to make this shape in CSS, but unfortunately could not find a way how to. It's half pipe like shaped:
The pixelated corner should be smooth (it's a zoomed in image).
Anyone knows how to create this? Or can get me on the right tracks?
You will need to use pseudo element :after for the inner block and then apply border-radius for curved corner.
div {
height: 60px;
width: 60px;
border: solid red;
position: relative;
background: red;
border-width: 0 10px 10px 0;
box-sizing: border-box;
}
div:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-bottom-right-radius: 10px;
background: #fff;
}
<div></div>
simple
.shape {
width: 140px;
height: 200px;
background-color: gray;
}
.shape:after {
content: '';
position: absolute;
width: 100px;
height: 160px;
background-color: #fff;
border-bottom-right-radius: 50px;
}
<div class="shape"></div>
I assume that the problem here is to create the "outer" curve, on the arbitrary background. It's achievable by the trick with clipping the needed part from the thick rounded border of the pseudo-element:
div {
width: 50%;
min-height: 4em;
margin: auto;
border: #888 solid;
border-width: 0 1em 1em 0;
position: relative;
}
div::after {
content: '';
border: #888 solid;
border-width: 0 1em 1em 0;
border-radius: 0 0 100% 0;
position: absolute;
right: -1em;
bottom: -1em;
width: 1em;
height: 1em;
clip: rect(0 1em 1em 0);
}
div:hover::after {
border-color: red; /* highlight the curved part */
}
body {
/* just as a background example */
background: repeating-linear-gradient(-45deg, #ddd, #ddd 1px, transparent 1px, transparent 10px);
min-height: 90vh;
}
<div></div>
You can do this with one element and with transparency like this:
.box {
width:80px;
height:100px;
border-right:20px solid grey;
border-bottom:20px solid grey;
box-sizing:border-box;
background:
radial-gradient(farthest-side at top left,transparent 98%,grey ) bottom right/20px 20px no-repeat;
}
body {
background:pink;
}
<div class="box">
</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
I tried a lot on oval shape which have cut in both sides but not able to do it please
I need code for oval shape with cut in both side..
Here's my code below:-
.demo{
width: 100%;
height: 600px;
background: white;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 178px;
border-radius: 694px / 208px;
z-index: 100;
position: relative;
}
Is this OK ?
HTML
<div id="oval_parent">
<div id="oval"></div>
</div>
CSS
#oval_parent{
background:black;
width:200px;
height:120px;
overflow:hidden;
}
#oval{
width: 220px;
height: 100px;
margin:10px 0 0 -10px;
background: white;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
DEMO.
Try this:
#oval-shape {
width: 200px;
height: 100px;
background: blue;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
Notice the ratios in the corner values in relation to the height.
Demo - http://jsfiddle.net/XDLVx/
Change the values on css:
#demo {
width: 100%;
height: 600px;
background: white;
-moz-border-radius: 50% / 250px;
-webkit-border-radius: 40% / 250px;
border-radius: 50% / 250px;
z-index: 100;
position: relative;
}
Put it inside another div which is high enough to show all the oval, not quite wide enough, and set overflow: hidden. If it's positioned at the centre the edges will be cut off, but you won't be able to side-scroll.
Here are two possible variants:
Method #01:
Use radial-gradient():
background: radial-gradient(ellipse 65% 40%, transparent 0, transparent 90%, black 90%);
body {
background: linear-gradient(orange, red);
padding: 0 20px;
margin: 0;
}
.oval {
background: radial-gradient(ellipse 65% 40%, transparent 0, transparent 90%, black 90%);
height: 100vh;
}
<div class="oval">
</div>
Method #02:
Create an overlay with :before or :after pseudo element.
Add border-radius.
Apply a large box-shadow with overflow: hidden on parent to hide undesired area.
body {
background: linear-gradient(orange, red);
padding: 0 20px;
margin: 0;
}
.oval {
position: relative;
overflow: hidden;
height: 100vh;
}
.oval:before {
box-shadow: 0 0 0 500px #000;
border-radius: 100%;
position: absolute;
content: '';
right: -10%;
left: -10%;
top: 10%;
bottom: 10%;
}
<div class="oval">
</div>