I am trying to put half circle background but radius in bottom not completely coming in circle....
Here is my code i have tried
.main {
overflow: hidden;
}
.bg {
width: 100%;
height: 800px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
background-color: lightgray;
margin-top: -130px;
}
<div class="main">
<div class="bg"></div>
</div>
Try this it's working in all devices
.main{
overflow: hidden;
}
.bg {
width:80vw;
height:40vw;
border-bottom-left-radius: 80vw;
border-bottom-right-radius: 80vw;
background-color: lightgray;
}
<div class="main">
<div class="bg"></div>
</div>
You can use an svg to make things easier. There is the circle element which you can include that always draws perfect circles. Place it so that only the bottom half shows and you've got a half circle.
Example:
svg {
width: 98vw;
height: 98vw;
}
<svg viewbox="0 0 100 100">
<circle cx="50" cy="0" r="50" fill="grey" />
</svg>
.halfCircle{
height:45px;
width:90px;
border-radius: 90px 90px 0 0;
background:green;
}
<div class="halfCircle"></div>
the bellow link has all the shape
https://paulund.co.uk/how-to-create-different-shapes-in-css
As per as you have told your requirements in your comment, I have this.
.main {
/*overflow: hidden;*/
}
.bg {
width: 400px;
height: 500px;
/*Have reduced the width and height just for the sake of simplicity. It's completely up to you */
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
background-color: lightgray;
margin-top: -130px;
}
<div class="main">
<div class="bg"></div>
</div>
Hope this solves your query.
It is working and looking perfectly .But the width should be twice the height and the border-redious first two parameters equal to height and last parameters should be 0
.halfCircle{
height:400px;
width:800px;
border-radius: 400px 400px 0 0;
background:green;
}
Related
I've found a weird issue where the rect inside the svg stays the same width as the svg on page load. Resizing the window (causing the svg to resize) doesn't update the width of the rect. Inspecting the element and toggling off/on the height or width then causes the width to update. This issue does not occur in Safari but does occur in Chrome and Firefox.
Is there a more correct way of doing the HTML and CSS to get the effect I need? I essentially want a dashed stroke around the box. I can't use dashed border as the dashes are not wide enough.
.box {
background: black;
min-height: 300px;
padding: 65px;
border-radius: 20px;
position: relative;
max-width: 700px;
margin: auto;
}
svg {
width: calc(100% - 46px);
height: calc(100% - 46px);
fill: none;
stroke: white;
stroke-dasharray: 8px;
position: absolute;
top: 23px;
left: 23px;
pointer-events: none;
}
svg rect {
width: calc(100% - 2px);
height: calc(100% - 2px);
}
<div class="box">
<svg xmlns='http://www.w3.org/2000/svg'>
<rect x='1' y='1' rx='5' />
</svg>
</div>
You can apply border-radius and padding properties to the svg and make the inner <rect> responsive using relative units.
body {
}
*{
box-sizing:border-box
}
.resize {
resize: both;
overflow: auto;
padding: 1em;
border: 1px solid red;
width: 100%;
}
.box{
width: 100%;
height:100%;
}
svg {
display: block;
width: 100%;
height:100%;
padding: 23px;
background: #000;
border-radius: 20px;
overflow:visible;
}
rect {
stroke: white;
stroke-dasharray: 8px;
stroke-width:1px;
}
<div class="resize">
<div class="box">
<svg xmlns='http://www.w3.org/2000/svg'>
<rect x='0' y='0' rx='5' width="100%" height="100%" />
</svg>
</div>
</div>
<p>Resize me</p>
overflow:visible will prevent any stroke clipping.
It is also important to set a box-sizing: border-box property - otherwise padding will introduce overflows.
This way we don't need any calc() width/height values, that can cause issues when applied to svg elements (... in some browsers).
I'm trying to improve my css skills, and wanted to draw like a moon and outline it. I mad this by using 2 circles and the second one has the same color as the background so it look like a moon. However now i want to outline/ give it a border but i don't know how to do this, because the other parts are overlapped with the secon circle.
body{
position: relative;
background-color: white;
padding-left: 40%;
}
#div1{
position: absolute;
height: 400px;
width: 400px;
border-radius: 100%;
background-image: linear-gradient(45deg, #050182, #51bfdb);
border: 3px solid black;
}
#div2{
position: absolute;
height: 350px;
width: 350px;
background-color: white;
border-radius: 50%;
margin-left: 110px;
margin-top: 25px;
z-index: 2;
}
<div class="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
I would simplify your code using mask then I will rely on drop-shadow filter for the outline
#div1{
filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000);
}
#div1:before {
content:"";
display:block;
height: 200px;
width: 200px;
border-radius: 50%;
background-image: linear-gradient(45deg, #050182, #51bfdb);
-webkit-mask: radial-gradient(circle 100px at 80% 50%,#0000 98%,#000);
}
<div id="div1"></div>
You can add border left property to div2 for desired result.
body{
position: relative;
background-color: white;
padding-left: 40%;
}
#div1{
position: absolute;
height: 400px;
width: 400px;
border-radius: 100%;
background-image: linear-gradient(45deg, #050182, #51bfdb);
border: 3px solid black;
}
#div2{
position: absolute;
height: 350px;
width: 350px;
background-color: white;
border-radius: 50%;
margin-left: 110px;
margin-top: 25px;
z-index: 2;
border-left: 3px solid black;
}
<div class="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
Like Justinas already commented, you're kind of trying to do SVG's job in CSS here, which is pretty clunky and inefficient.
If you know a little HTML and CSS, which it seems you do, then SVG will feel like just more of the same.
SVG will just look like a couple new HTML elements to you, and you just sprinkle it right into your HTML; It also just uses the same CSS stylesheet that as your HTML already uses.
To illustrate, run this snippet here; just a couple lines of CSS and some SVG, i'm sure you can tell what 90% of it means instantly.
body { background-color: #FFF; }
svg { background-color: #CCC; }
.gradient_start { stop-color:rgb(255, 255, 0); stop-opacity: 1; }
.gradient_end { stop-color:rgb(255, 0, 0); stop-opacity: 1; }
text { font-family: "Verdana"; font-size: 32pt; }
<html>
<body>
<svg width="400" height="200">
<defs>
<linearGradient id="mygradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" class="gradient_start" />
<stop offset="100%" class="gradient_end" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#mygradient)" />
<text x="150" y="86" fill="#ffffff">
Turtles !
</text>
</svg>
</body>
</html>
In SVG you have access to a lot more drawing elements, such as the <ellipse> used in this example.
Look at the result, using the border-left property.
body{
position: relative;
background-color: white;
padding-left: 40%;
}
#div1{
position: absolute;
height: 400px;
width: 400px;
border-radius: 100%;
background-image: linear-gradient(45deg, #050182, #51bfdb);
border: 3px solid black;
}
#div2{
position: absolute;
height: 350px;
width: 350px;
background-color: white;
border-radius: 50%;
margin-left: 110px;
margin-top: 25px;
z-index: 2;
border-left: 2px solid black;
}
<div class="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
I want my svg images to be on bottom of my block (position:absolute, bottom:0). But in Internet Explorer it doesn't work (displays in the center). I can set width and height to svg and it will work somehow, but it will broke on another device with smaller/bigger screen size. How can I resolve this problem? Thank you!
Here is the code codepen
.wrapper {
padding: 150px 20px 50px;
text-align: center;
color: #fff;
}
.main {
background-color: #000;
line-height: 48px;
position: relative;
}
svg {
position: absolute;
bottom: 0;
}
.left {
left: 0;
}
.right {
right: 0;
}
<div class="main">
<div class="wrapper">
<div class="text">Some text here</div>
<button>click</button>
</div>
<svg class="left" fill="#fff" viewBox="0 0 1300 150" width="50%">
<polygon points="0,0 0,150 1300,150"></polygon>
</svg>
<svg class="right" fill="#fff" viewBox="0 0 1300 150" width="50%">
<polygon points="1300,0 0,150 1300,150"></polygon>
</svg>
</div>
You can achieve the same with using either simple divs or with pseudo elements. The following is an example I created to demonstrate both approaches.
https://codepen.io/Nasir_T/pen/oEYYob
The example uses position along with border to set the bottom design the way your want. You can use the div solution if you want to place images in it or use the pseudo solution if only want to show arrow cut in the design at the bottom.
If you want a background image, why not use a background-image??
.wrapper {
padding: 150px 20px 50px;
text-align: center;
color: #fff;
}
.main {
background-color: #000;
line-height: 48px;
position: relative;
background-image: url('data:image/svg+xml,<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg viewBox="0 0 52 3" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 26,3 52,0 52,3 0,3" fill="#fff" /></svg>');
background-repeat: no-repeat;
background-position: center bottom;
}
<div class="main">
<div class="wrapper">
<div class="text">Some text here</div>
<button>click</button>
</div>
</div>
This can be accomplished using CSS alone.
We can make triangle shape in CSS. Stick a triangle at the bottom of your main container. Will give the same effect.
.wrapper {
padding: 110px 20px 50px;
text-align: center;
color: #fff;
}
.main {
background-color: #000;
line-height: 48px;
position: relative;
width: 1000px;
}
.arrow-down {
width: 0;
height: 0;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-top: 50px solid #000;
position:absolute;
bottom:-50px;
}
svg {
position: absolute;
bottom: 0;
}
.left {
left:0;
}
.right {
right:0;
}
<div class="main">
<div class="wrapper">
<div class="text">Some text here</div>
<button>click</button>
</div>
<div class="arrow-down">
</div>
</div>
I'm trying to make a corner block, to create a one-page as in the photo below. But I ran into a problem.
I tried to make div slopes, but when looking at different resolutions it looked crooked.
What i need screen
(there was also a problem in that before these inclined divs there was a background image and some holes that left this div, the picture showed through.)My Fail Screen
.tri-index-right {
background: #fff;
height: 150px;
width: 100%;
transform: skewY(4deg);
overflow: hidden;
position: relative;
z-index: 2; /*fail method*/
}
I can not understand how to extend this angle using the CSS method at width 100%.
.1 {
min-width: 500px;
}
#triangle-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 100px solid red;
border-bottom: 100% solid transparent;
}
<div class="1">
<div id="triangle-left"></div>
</div>
I will be very grateful for the help
You can use vw for full width or use svg
.one {
width: 100%;
height: 200px;
background: url('https://imgur.com/a/kA3XA') center center no-repeat;
background-size: cover;
}
#triangle-left {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 100vw solid red;
}
<div class="one">
<div id="triangle-left"></div>
</div>
you can also use svg for this
.main {
position: relative;
min-height: 200px;
}
.svg-container svg {
width: 100%;
height: 150px;
fill: #333; /* change color to white since */
}
<div class="main">
<!-- main image -->
</div>
<div class="svg-container">
<svg xmlns="https://www.w3.org/2000/svg" version="1.1" class="separator" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 L100 0 L100 100 Z"></path>
</svg>
</div>
you can also use multiple background image including a sharp gradient :
header {
min-height: 4em;
background:
/* first the mask */
linear-gradient(to bottom right, transparent 49.5%, white 50.5%) bottom left no-repeat,
/* then the background image */
url(http://lorempixel.com/400/300/abstract/1) 0 0;
/* finally resize each image, in particular the mask */
background-size: 100% 4em, cover;
padding: 1em 2em 4em;
color: white;
}
body {
margin: 0;
}
div {
padding: 1em;
}
<header>
<h1>whatever</h1>
</header>
<div>next content</div>
I know html and css very well , i'm looking for something like this with css not with images ?
is there any trick that can do this with Css ?
HTML
<div id="zone-user-wrapper" class="zone-wrapper"></div>
CSS
.zone-wrapper{
background: none repeat scroll 0 0 #01b888;
height:150px;
}
i made a fiddle
Thx
You can try something like this:
Fiddle
HTML:
<div class="zone-wrapper"></div>
<div id="shape"></div>
CSS:
.zone-wrapper{
background: none repeat scroll 0 0 #01b888;
height:150px;
}
#shape {
height: 20px;
background-color: white;
border-top-left-radius: 5000px 300px;
border-top-right-radius: 5000px 300px;
top: -20px;
position: relative;
}
<------------------------------------------------------------ Edit ------------------------------------------------------------->
Replicating the one on this website as you requested.
Here, I've added the border-top-left-radius: 4000px 150px and border-top-right-radius: 4000px 150px; to .content and .seperator. Then, gave appropriate z-index to all elements. .content has the highest z-index value, .zone-wrapper has the lowest z-index value and .seperator is in the middle.
<--------------------[ Fiddle | Full Screen Demo | With the Image from your website ]-------------------->
HTML:
<div class="zone-wrapper"></div>
<div class="seperator"></div>
<div class="content"></div>
CSS:
body {
margin: 0 0;
}
.zone-wrapper{
background: url(http://s25.postimg.org/4lur4kk23/pattern.png) repeat scroll 0 0 #01b888;
height:180px;
z-index: 0;
}
.seperator {
height: 50px;
background-color: #00533D;
border-top-left-radius: 4000px 150px;
border-top-right-radius: 4000px 150px;
top: -47px;
width: 100%;
position: relative;
z-index: 1;
}
.content {
top: -90px;
position: relative;
height: 800px;
background-color: #93fbdf;
border-top-left-radius: 4000px 150px;
border-top-right-radius: 4000px 150px;
z-index: 2;
}
The Flexible Option with a single HTML element
I have focused on creating the shape with a:
single HTML element — <header></header>
flexible percentage units
The CSS
The :before and :after pseudo elements overlap to create the curve
The pseudo elements are given 100% width and will expand and retract
The box shadow helps smooth out the jagged curve and the textured background image distracts the eyes from the remaining jagged pixels
The left: -20px and padding-right: 20px hide the rounded corner and are cut-off with overflow: hidden
Image Attribution: The background image used in the example below is obtained from transparenttextures.com and was created by Atle Mo.
The Example
Open full-screen and watch it re-size.
body {
margin: 0;
}
header {
background: url(http://i.stack.imgur.com/TIgas.png);
height: 80px;
position: relative;
overflow: hidden;
}
header:after,
header:before {
content: '';
display: block;
background: #FFF;
height: 60%;
width: 100%;
position: absolute;
border-radius: 100% 100% 0 0;
top: 50%;
left: -20px;
padding: 0 20px;
box-shadow: inset 0 0 2px #333;
}
header:before {
background: #333;
margin-top: -5px;
}
<header></header>
.zone-wrapper{
background: none repeat scroll 0 0 #01b888;
height:150px;
border-radius: 40px 40px 40px 40px;
overflow:hidden;
}
.zone-wrapper2{
margin-top:10px;
display:inlin-block;
background: black;
height:130px;
border-radius: 40px 40px 40px 40px;
}
<div id="zone-user-wrapper" class="zone-wrapper">
<div id="div2" class="zone-wrapper2">
</div>
</div>
The trick is to have 2 divs. The first could be your actual header and another just beneath it having a border-radius property. So your whole header could be a wrapper around the 2.
Did some tinkering to the html of your code.
Added a div in the main header wrapper.
Check the image below:
Hope it is of help.
You can use something like this from (https://stackoverflow.com/a/4777943/3905567):
<div id="header">
<div id="cover-left"></div>
<div id="cover-right"></div>
</div>
http://jsfiddle.net/p2hH7/215/