Is it possible to create a flat oval that is as round as the example below?
I've looked at several examples on how to create the oval itself using CSS from the following sources:
http://css-tricks.com/the-shapes-of-css/
http://jsfiddle.net/QGtzW/1/
Unfortunately, as you size it down in height the oval just doesn't want to retain the rounded shape. Here is my current code on how I'm trying to achieve the same visual look as the image above:
HTML
<ul>
<li>
<a href="#">
<span class="text">Home</span>
<span class="oval"></span>
</a>
</li>
</ul>
CSS
a {
position: relative;
padding: 10px 30px 0px 30px;
text-transform: uppercase;
background-color: red; color: #fff;
}
.text {
position: relative;
z-index: 1;
}
.oval {
position: absolute;
bottom: -8px; left: 0;
z-index: 0;
display: block;
width: 100%; height: 20px;
border-radius: ~"20px/10px"; /* I'm using LESS and it requires ~"" to make it work */
background-color: red;
}
As a thank you for everyone here and as help for anyone in the future, here is my final code:
HTML
<ul>
<li>
Home
</li>
</ul>
CSS
a {
overflow: hidden;
position: relative;
padding: 10px 30px 20px 30px;
text-transform: uppercase;
color: #fff;
&:before {
content: '';
position: absolute;
top: 0; left: -25%; bottom: 4px;
z-index:-1;
width: 150%;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
background-color: #AECE33;
border: 3px solid #6B6A65; border-top: 0;
}
}
Here is a responsive version of this shape using a pseudo element to minimize markup :
DEMO
Output :
HTML :
<div>Home</div>
CSS :
div {
position:relative;
width:40%; height:100px;
overflow:hidden;
margin:10px auto;
text-align:center;
font-size:1.8em;text-transform:uppercase;line-height:90px;color:#fff;
}
div:before {
content:'';
position:absolute;
top:0; left:-25%; bottom:4px;
width: 150%;
background-color: #AECE33;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
border:4px solid #6B6A65;
border-top:0;
z-index:-1;
}
DEMO1
.cover{ height:100px; width:300px; overflow:hidden;}
.set {
background-color: #80C5A0;
width: 400px;
height: 100px;
margin-left:-50px;
border-radius: 50% / 100%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
<div class="cover">
<div class="set"></div></div>
and this is what you want
DEMO2
and for creating a fluid menu as you asked below use DEMO3
Try this CSS
div {
background-color: #80C5A0;
width: 400px;
height: 100px;
-webkit-border-radius: 100% 100% 100% 100% / 0% 0% 100% 100%;
border-radius: 100% 100% 100% 100% / 0% 0% 100% 100%;
}
jsfiddle
Related
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 am trying to design a landing page to link to 2 web apps. I am trying to make the design as visually attractive as possible. I think it would look good if the Divs containing the links were side-by-side at the centre of the screen, with their edges overflowing the left and right of the screen. I can then put a border-radius on them and some nice blocky colour:
Goal:
I have tried numerous options, including inline-block and overflow:hidden:
HTML
<div id="centre-pane">
<div class="app-btn">
<img src="icon.png">link text
</div>
<div class="app-btn">
<img src="icon2.png">link text
</div>
</div>
CSS
.app-btn
{
width:1000px;
height:320px;
display:inline-block;
border:10px solid black;
border-radius: 50px;
}
#centre-pane {
width:2000px;
margin:0 auto;
text-align:center;
overflow-x: hidden;
}
Is this possible? I have found several ways of getting them side-by-side (eg here) but nothing that also lets them overflow the screen.
Just using position absolute would do the trick.
I've added a wrapper but it may not be required.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html,
.wrapper {
height: 100%;
}
.wrapper {
position: relative;
}
.btn {
width: 45%;
height: 30%;
background: lightblue;
border: 2px solid blue;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.left {
left: 0;
border-radius: 0 25% 25% 0;
border-left: none;
}
.right {
right: 0;
border-radius: 25% 0 0 25%;
border-right: none;
}
<div class="wrapper">
<div class="btn left"></div>
<div class="btn right"></div>
</div>
You can achieve this with absolute positioning and negative margins (for the right item). You'll have to fix the size of the body though in order to achieve the effect. I've also added individual classes to the first and second item respectively (.app-btn-1 and .app-btn-2):
body {
width: 2000px;
overflow-x: hidden;
}
.app-btn {
width:1000px;
height:320px;
position: absolute;
border:10px solid black;
border-radius: 50px;
overflow-x: hidden;
}
.app-btn-1 {
left: -500px;
text-align: right;
}
.app-btn-2 {
left: 100%;
margin-left: -500px;
}
DEMO
NOTE: For my demo to look right in jsfiddle, I've quartered the sizes so you can see the effect in the small window
Here is the code you need:
.menu {
display: inline-block;
height: 200px;
width: 40%;
margin-top: calc(50% - 100px);
border: 2px solid red;
background-color: brown;
color: black;
text-decoration: none;
transition: all 0.5s;
}
#left {
float: left;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin-left: -10px;
}
#right {
float: right;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
margin-right: -10px;
}
.menu:hover {
background-color: gray;
border-color: brown;
color: red;
}
<div class="menu" id="left">Left</div>
<div class="menu" id="right">Right</div>
I made a
JS Fiddle for you.
How would i create a div shape like this? I have read a lot of techniques but i could not figure this one out. Inside the div is text that should not be distorted.
Every technique is welcome it does not have to be pure css.
My HTML structure:
<div class="intro">
<div class="intro-header">
<h1>Headline WOW</h1>
</div>
<div class="intro-text">
<p>Mieleni minun tekevi, aivoni ajattelevi lähteäni laulamahan, saa'ani sanelemasaa'ani sanelema sanelemasaa'ani sanelema </p>
</div>
</div>
you could use some skewed pseudo elements for this:
.first,
.last {
text-align: center;
line-height: 80px;
height: 80px;
background: green;
position: relative;
display: inline-block;
width: 400px;
margin-bottom: 20px;
}
.first:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 50%;
width: 100%;
transform: SkewY(2deg);
transform-origin: bottom left;
background: inherit;
}
.last:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 100%;
transform: SkewY(2deg);
transform-origin: bottom right;
background: inherit;
}
<div class="first">FIRST LINE</div>
<div class="last">LAST LINE</div>
An alternative (possibly) would be to use a gradient (although this may lead to jagged edges). Solution credit to Harry
body {
background: -webkit-linear-gradient(0deg, crimson, indianred, purple);
}
div {
height: 400px;
width: 400px;
background: -webkit-linear-gradient(75deg, lightseagreen 45%, transparent 45%, transparent 55%, lightseagreen 55%);
}
<div></div>
You can do this with border cut-offs.
As an example:
.top {
height: 300px;
background: red;
position: relative;
width: 300px
}
.top:before {
content: '';
position: absolute;
bottom: 0;
right: 0;
border-bottom: 10px solid white;
border-right: 300px solid red;
width: 0;
}
.bottom {
height: 300px;
background: red;
position: relative;
width: 300px;
padding-top: 10px;
margin-top: 0px;
}
.bottom:before {
content: '';
position: absolute;
top: 0;
right: 0;
border-top: 10px solid white;
border-left: 300px solid red;
width: 0;
}
<div class="top">Text</div>
<div class="bottom">Text</div>
This should do it.
html,body{
margin:0;
height:100%;
}
.intro{
width:400px;
display:inline-block;
background:red;
padding:50px;
}
.intro-header,.intro-text{
width:100%;
display:inline-block;
background:#ccc;
text-align:center;
position:relative;
}
.intro-header{
margin-bottom:50px;
}
.intro-header:after{
position:absolute;
left:0;
content:"";
width: 0;
height: 0;
border-left: 400px solid transparent;
border-top: 20px solid #ccc;
}
.intro-text:after{
position:absolute;
top:-20px;
left:0;
content:"";
width: 0;
height: 0;
border-right: 400px solid transparent;
border-bottom: 20px solid #ccc;
}
Example: CodePen
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>
I want to make the following icon in CSS3 such that I can very the width and height of only ".circle" (or some other wrapper element, point is I want to adjust width and height in one place or even make it so that it automatically fits in any container regardless of width and height) without having to adjust any other CSS3 properties to make the "A" line up in the center.
What is the best way to do this? If you can recommend a better way to do the following it would be very appreciated. The issue with what I have is that changing ".circle"'s width and height to be smaller affects the positioning of the positioning of eveerything else forcing me to change .circle2's properties and .letter's properties until things line up.
CSS
.circle {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
cursor:pointer;
}
.circle2 {
width:80%;
height:80%;
border-radius: 50px;
position:relative;
top:5%;
left:5%;
border: 5px solid #FFF;
}
letter{
position:relative;
top:45%;
left:30%;
margin:auto;
cursor:pointer;
color: #fff;
font-size: 60px;
font-weight: bold;
display: inline-block;
line-height: 0px;
}
letter:before {
content: "A"
}
HTML
<div class="circle">
<div class="circle2">
<a class="letter"></a>
</div>
</div>
Have a look. The only thing that's tricky is the "A" font size. You could use a library like http://fittextjs.com/ to accomplish this fully.
http://jsfiddle.net/cSBw3/1/
Code is bellow and modified.
CSS3
.container {
width: 100px;
height: 100px;
text-align: center;
}
.circle {
width: 100%;
height: 100%;
background: blue;
cursor:pointer;
position: relative;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.circle:after {
content:"";
display: block;
position: absolute;
/* width: 80%; height: 80%; */
top: 10%; bottom: 10%;
left: 10%; right: 10%;
border: 5px solid #FFF;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.letter {
cursor:pointer;
display: block;
}
.letter:before {
content: "A";
display: block;
position: absolute;
bottom: 19%;
right: 19%;
font-size: 3em;
font-weight: bold;
color: #fff;
}
HTML
<div class="container">
<div class="circle">
<a class="letter"></a>
</div>
</div>