I'm trying to skew my div with border-radius-left-top and border-radius-left-right but I think that isn't solution. To understand what I'm trying to do, here it's image:
border-radius: 50% / 100%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
Your border-radius has this shape because the circle has different height and width(like in pink-one). For correct shape it should be like square. Height should be equal width. Use pseudo element to do this(the third div):
*, *:before, *:after{
box-sizing: border-box;
}
div {
position: relative;
height: 200px;
padding-bottom: 70px;
}
.one {
background-color: #fcfdfe;
}
.one:before {
content: '';
position: absolute;
border-radius: 50%;
height: 100%;
width: 100%;
background-color: pink;
}
.two {
margin-top: -70px;
padding-top: 70px;
padding-bottom: 70px;
background-color: #edf3f8;
border-top-left-radius: 200% 240px;
border-top-right-radius: 200% 240px;
}
.three {
position: relative;
background-color: #10538c;
}
.three-border{
position:absolute;
overflow:hidden;
height:70px;
top:-70px;
left:0;
right:0;
}
.three-border:before {
content: '';
position: absolute;
border-radius: 50%;
height: 300vw;
width: 300vw;
margin: 0 -100vw;
background-color: #10538c;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" rel="stylesheet"/>
<div class="one">1111</div>
<div class="two">2222</div>
<div class="three">
<div class="three-border"></div>
3333
</div>
Related
This question already has answers here:
Curve bottom side of the div to the inside with CSS
(2 answers)
Closed 4 years ago.
I have added 2 pictures here. You can see that first curve is down curve and second one is up curve.
Now, I have a rectangle box using CSS. I want to make the top and bottom border should be like the picture.
I can use CSS border-radius property to make a border curve. But I don't understand how can I make this type of border curve using CSS3?
Updated:
Here is the full output I desire:
I used before after to achieve this
div{
width: 400px;
height: 200px;
background-color: #333;
position: relative;
overflow: hidden;
}
div:before {
content: "";
position: absolute;
top: -10%;
width: 100%;
height: 50%;
background-color: white;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
div:after {
content: "";
position: absolute;
width: 100%;
bottom: -10%;
height: 50%;
background-color: white;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
<div></div>
Update
after OP's recent comment, here you can add content in content-main div
.content{
background-color: #333;
width: 400px;
}
.content-top, .content-bottom{
width: 400px;
height: 100px;
background-color: #333;
position: relative;
overflow: hidden;
}
.content-top:before {
content: "";
position: absolute;
top: -10%;
width: 100%;
height: 50%;
background-color: white;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
.content-bottom:after {
content: "";
position: absolute;
width: 100%;
bottom: -10%;
height: 50%;
background-color: white;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
.content-main{
padding: 10px;
}
<div class="content">
<div class="content-top"></div>
<div class="content-main">
<h1>Cat</h1>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS11TbGOYA0EmL-usNpArFE8o17OSRSilYYohX1lgyxaP43M2Pt">
</div>
<div class="content-bottom"></div>
</div>
You can achieve this using two Divs one with black background and the children with white background and rounded borders. The wrapper should have a padding to simulate border thickness:
#wrapper{
background:#000000;
width:600px;
height:200px;
padding:10px;
}
#roundCurve{
background:#ffffff;
width:600px;
height:200px;
border-bottom-left-radius:50% 50px;
border-bottom-right-radius:50% 50px;
border-top-left-radius:50% 50px;
border-top-right-radius:50% 50px;
}
<div id="wrapper">
<div id="roundCurve"></div>
</div>
Here is an example you can follow:
body {
background: black;
}
.roundCorner {
width: 150px;
height: 100px;
padding: 2em;
border-bottom: 0;
position: relative;
background: white;
border-radius: 1em 1em 0 0;
}
.roundCorner:before {
position: absolute;
left: -1px;
right: -1px;
top: 0;
height: 1.5em;
border: 1px solid black;
border-top: 0;
border-radius: 0 0 3em 3em;
content:'';
background: black;
}
.roundCorner:after {
position: absolute;
left: -1px;
right: -1px;
bottom: 0;
height: 1.5em;
border: 1px solid black;
border-bottom: 0;
border-radius: 3em 3em 0 0;
content: '';
background: black;
}
<div class="roundCorner"></div>
You can change background of body, .roundCorner, .roundCorner:before, .roundCorner:after to see how it's working.
This question already has answers here:
Is a CSS Arch using border-radius possible?
(5 answers)
Closed 6 years ago.
Can anyone explain me how make a rounded border div like
this image?
I tried but the result is not the same: the left and right side curves should be less hard.
Here it is my code snippet:
.cnt {
margin: 0 auto;
border: 1px solid grey;
width: 300px;
height: 150px;
position: relative;
background-color: #4a4d84;
}
.t {
position: absolute;
width: 100%;
height: 50px;
background-color: red;
bottom: 0;
}
.t::before {
content: "";
position: absolute;
width: 100%;
height: 70px;
top:-30px;
background-color: red;
border-radius: 50% 50% 0 0;
}
<div class="cnt">
<div class="t">
</div>
</div>
Can you help me?
You want the circle to be round and much wider than the parent, yet at the same or a similar aspect ratio, hide the overflow, and you can do it with a single element.
div {
width: 400px;
height: 300px;
background: blue;
position: relative;
overflow: hidden;
}
div:after {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translateX(-50%);
background: red;
height: 300%; width: 400%;
border-radius: 50%;
}
<div></div>
Increasing .ts width to 200% and having a larger border radius does the trick. You can now alter its height to adjust the curve.
.cnt {
margin: 0 auto;
border: 1px solid grey;
width: 300px;
height: 150px;
position: relative;
background-color: #4a4d84;
overflow: hidden;
}
.t {
position: absolute;
width: 200%;
height: 200px; /* Change this to adjust the curvature. */
top: 40%;
left: -50%;
background-color: red;
border-radius: 200%;
}
<div class="cnt">
<div class="t">
</div>
</div>
you can increase the width (as advised in other answers) of your pseudo and use a box-shadow to paint the upper part of the box:
div:before {
content:'';
position:absolute;
top:3em;
left:-5%;
right:-5%;
bottom:0;
box-shadow:0 0 0 8em turquoise;
border-radius:100% 100% 0 0%;
pointer-events : none; /* remove it from the way */
}
div {
box-sizing:border-box;
position:relative;
width:300px;
margin:auto;
border:solid;
font-size:20px;
padding:5em 1em 1em;
background:tomato;
color:white;
text-align:center;
font-variant:small-caps;
overflow:hidden;
}
<div>
Some text here
</div>
Another approach to use background-image:
.main {
width: 300px;
height: 200px;
position: relative;
/*
140% is x-axis,
50% is y-axis,
at 50% is x-position
90% is y-position
*/
background-image: radial-gradient(140% 50% at 50% 90% , #1F8698 0%, #1F8698 50%, #1DC0D6 50%, #1DC0D6 100%)
}
.main::after
{
content: "Text Here";
position: absolute;
bottom: 10%;
width: 100%;
text-align: center;
font-size: 25px;
color: white;
}
<div class='main'></div>
I want to create same bottom triangle effect with background but i am not able to get this effect bottom triangle with background image.
enter image description here
i have added the code here but not getting the same effect.bottom arrow im not able to extend as in image.
.logo,.nav,.social-icons{ float:left;}
body{ color:#000; background:#ccc;}
.container{border:1px solid red;}
.clear{ clear:both;}
html,body{margin:0;padding:0;}
/*****************************
BANNER
*****************************/
.section {
height: 680px;
width: 100%;
background: url("http://i.imgur.com/YtluDV9l.jpg") no-repeat left top;
background-size:cover;
}
.bottom-container {
margin-top: -137px;
height: 100px;
width: 100%;
}
.text {
position: relative;
box-sizing: border-box;
height: 300px;
padding-top: 36px;
text-align: center;
line-height: 85px;
background: url("http:////i.imgur.com/uCYtKen.jpg") no-repeat left top;
background-clip: content-box;
overflow: hidden;
margin: 25px 0 0 0;
}
.text:before {
left: 0px;
width: 26%;
transform-origin: left bottom;
transform: skew(-134deg);
}
.text:after, .text:before {
position: absolute;
content: '';
top: 0px;
height: 35px;
background: #fff;
}
.text:after {
right: 2px;
width: 74%;
transform-origin: right bottom;
transform: skew(-226deg);
}
<body>
<!--WRAPPER:STARTS-->
<div id="wrapper">
<!--HEADER:STARTS-->
<!--BANNER:STARTS-->
<section class="section">
</section>
<div class="bottom-container">
<div class="text">Some text</div>
<div class="middle-image"></div>
<div class="right-image"></div>
</div></div>
</body>
html,body{background:url(http://i.imgur.com/ixr4wNC.jpg); height:100%;padding:0;margin:0;overflow:hidden;}
.line {
margin-top: 50px;
height: 5px;
width: 20%;
background: #fff;
position: relative;
box-sizing: border-box;
}
.line:after,
.line:before {
content: "";
position: absolute;
}
.line:after {
left: calc(100% + 2px);
height: 25px;
width: 25px;
top: -12px;
border-top: 5px solid #fff;
border-left: 5px solid #fff;
transform: rotate(225deg);
}
.line:before {
height: 100%;
top: 0;
left: calc(100% + 34px);
width: 400px;
background: inherit;
}
<div class="line"></div>
Is this the same that you are looking for?
Here is JSFiddle
Hope this helps.
#circle { width: 100px; height: 100px;
position: relative;
background: gray; opacity: .6;
margin: 0 auto;
border-radius: 50%;
z-index: 2;}
#line { display: block; position: relative;
width: 100%; height: 5px;
background: red; top: -50px;
z-index: 1;}
<div id="circle"></div>
<div id="line"></div>
How to make parts of the red line that stay behind the circle invisible? Without changing the opacity of the circle to 1.
You don't need a separate "line" div for this.
body {
overflow: hidden;
background:grey;
}
#circle {
width: 100px;
height: 100px;
position: relative;
background: rgba(0,255,0,0.5); /* semi-transparent green */
opacity: .6;
margin: 0 auto;
border-radius: 50%;
z-index: 2;
}
#circle:before,
#circle:after {
content: '';
position: absolute;
width: 50vw;
top:50%;
height: 5px;
}
#circle:before {
left:0;
transform:translate(-100%,-50%);
background:red;
}
#circle:after {
left:100%;
transform:translate(0,-50%);
background:blue;
}
<div id="circle"></div>
Put a your circle inside a white circle see fiddle https://jsfiddle.net/v61bguns/
HTML
<div id="circle2"><div id="circle"></div></div>
<div id="line"></div>
CSS
#circle2 { width: 100px; height: 100px;
position: relative;
background: white;
margin: 0 auto;
border-radius: 50%;
z-index: 2;}
#circle { width: 100px; height: 100px;
position: relative;
background: gray; opacity: .6;
margin: 0 auto;
border-radius: 50%;
z-index: 3;}
#line { display: block; position: relative;
width: 100%; height: 5px;
background: red; top: -50px;
z-index: 1;}
How do I create this in css? I'm having trouble aligning the circle divs vertical middle.
See image:
Here what I've done: https://jsfiddle.net/5odbwkn5/
.gray-btn1 {
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: url(../images/ico/9.png) no-repeat center 70%;
background-color: #5dd6e4;
margin-left:-20px;
position: relative;
float:left;
}
.gray-btn {
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: url(../images/ico/9.png) no-repeat center 70%;
background-color: #5dd6e4;
margin-right: -20px;
position: relative;
float:right;
}
.gray-mid {
background-color: #5dd6e4;
text-align:center;
}
<div class="gray-mid">
<div class="gray-btn1"><span class="fa-connectdevelop">left</span>
</div>
<div class="gray-btn"><span class="fa-connectdevelop">right</span>
</div>
<div style="height:100px">middle</div>
</div>
you can use pseudoelements as before and after to make easily that effect:
.container:before {
content:' ';
display:block;
height: 30px;
width:30px;
background-color:#999;
border-radius:15px;
position:absolute;
left:-15px;
top:7px;
}
.container:after {
content:' ';
display:block;
height: 30px;
width:30px;
background-color:#999;
border-radius:15px;
position:absolute;
right:-15px;
top:7px;
}
here is the FIDDLE I made for you as an example.
Edited: I updated the fiddle to be sure that the circles ("before" and "after") are positioned behind the container. And move slightly the elements to make it more simillar to your image.
First of all, you should not duplicate styles. Instead, extend common btn styles with specific for left button.
You can position buttons in the middle with the help of position: absolute relatively to the parent and top: 50%, margin-top: -25px fixes vertical offset in this case.
As the result it will become:
.gray-mid {
margin-left: 30px;
width: 400px;
background-color: #5dd6e4;
text-align:center;
position: relative;
}
.gray-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: url(../images/ico/9.png) no-repeat center 70%;
background-color: #5dd6e4;
right: -20px;
position: absolute;
top: 50%;
margin-top: -25px;
}
.gray-left {
left: -20px;
right: inherit;
}
<div class="gray-mid">
<div class="gray-btn gray-left"><span class="fa-connectdevelop">left</span></div>
<div class="gray-btn"><span class="fa-connectdevelop">right</span></div>
<div style="height:100px">middle</div>
</div>
Is this what you're looking for?
There are multiple ways which you can achieve vertical centering. There's even a really easy to follow guide posted by Chris Coyier here that you can reference whenever you need.
This is basically what I go to when I need to center something vertically.
.parent-with-centered-content {
position: relative;
}
.parent-with-centered-content > .child-element {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
You could use pseudo elements for this kind of functionality, and position them accordingly.
div {
position: relative;
display: inline-block;
height: 30px;
width: 200px;
background: gray;
margin: 30px;
text-align: center;
line-height: 30px;
}
div:before,
div:after {
content: "";
position: absolute;
height: 20px;
width: 20px;
border-radius: 50%;
background: gray;
top: 5px;
z-index: -1;
}
div:before {
left: -10px;
}
div:after {
right: -10px;
}
<div>This is some text</div>
I did not try to match your fonts, but using background image, and just a little css, here you go:
https://jsfiddle.net/z8z3h75h/
<div id="background">
<div class="left">
FACEBOOK
</div>
<div class="right">
become a fan
</div>
</div>
#background {
background-image:url(http://s28.postimg.org/loa285ugt/1_SEOh.jpg);
width:409px;
height:41px;
}
.left {
float:left;
margin-left:30px;
color:white;
margin-top:10px;
}
.right {
float:right;
margin-right:40px;
color:white;
margin-top:10px;
}
The correct way to do that is to set top: 50% and translate or set margin on :pseudo elements
:root{text-align: center;padding: 40px 0 0 0}
.container{
display: inline-block;
position: relative;
padding: 6px 10px
}
.container, .container:before, .container:after{
background: #a6a195;
}
.container:before, .container:after{
content: '';
position: absolute;
top: 50%;
margin-top: -10px; /** height/2 **/
width: 20px;
height: 20px;
border-radius: 50%
}
.container:before{left: -10px}/** width/2 **/
.container:after{right: -10px}
.container div{display: inline; color: white}
.container .txt1{margin-right: 20px}
.container .txt2{font-size: 12px}
<div class="container">
<div class="txt1">FACEBOOK</div>
<div class="txt2">Become a fan</div>
</div>