This question already has answers here:
curved div with transparent top
(3 answers)
How to make a curve on a rectangle's top in css? only in top edge
(3 answers)
Closed 2 years ago.
I am struggling with creating a CSS top right & conrner of the oval shap css. it should look like attached images.
<style>
.up-next-container {
width: 824px;
height: 161px;
background-color: yellow;
display: flex;
position: relative;
}
.up-next-inner {
width: 100%;
height: 400px;
position: absolute;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
display: block;
}
<div class="up-next-container">
<div class="up-next-inner">Hello</div>
</div>
You can use the clip-path property for this:
clip-path: ellipse(50% 100% at 50% 100%);
This will clip your container with an ellipse with following properties:
50% radius on the x (effectively making the ellipse as wide as the container)
100%: radius on the y (making the ellipse twice the height of the container)
50%: x at the center of the container (nicely in the middle)
100%: y at the bottom of the container (this will cut off the lower half of the ellipse as it is outside of the container)
Related
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Setting Element Width Based on Height Via CSS
(10 answers)
Closed 1 year ago.
I want to make a div the same width as its height. Currently it stretches horizontally, which is not what I want (see the image). Also have a look at the css code!
Thanks for your advice.
The CSS for the red circle (with the logo):
.logo-component {
background-color: hsla(340, 100%, 50%, 0.6);
background-image: url('./../images/logo.png');
background-size: auto calc(100% - 6rem);
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: calc(100% - 6rem);
border-radius: 50%;
transform: translateY(-2.5rem);
}
A Screenshot:
Bye.
Use aspect-ratio like shown below.
.logo-component {
background-color: hsla(340, 100%, 50%, 0.6);
width: 110px;
border-radius: 50%;
aspect-ratio: 1 / 1;
resize: horizontal;
}
<div class="logo-component"></div>
I need help understanding clip-path CSS property in order to make my version of a clipped circle below...
More like the design version:
If you can see on the grey background, my circle appears a lot larger and less round when it's clipped.
What can I do to make a more round circle? My ideas were:
Use clip-path as in the snippet below
Use a pseudo :after element or a right border with radius
Cut a circle image from photoshop and use it as a background image.
Preferably, I'd like to avoid using a background image. However, I need to keep responsiveness in mind as the circle cannot change shapes drastically as we resize the window.
Is clip-path the right way to go? Can someone suggest a simpler and elegant solution with another way using CSS?
Thank you in advance, here's a snippet I wrote that illustrates how I clipped the "green/blue" background:
.page-banner {
background: grey;
width: 100%;
height: 300px;
background-position: top;
overflow: hidden;
}
.page-banner-text {
position: absolute;
background: #00525d8a;
padding-left: 100px;
width: 60%;
/* adjustments to snippet */
top: 10px;
left: 10px;
height: 300px;
/* this is the code for circle */
clip-path: circle(560px at left);
padding-right: 250px;
}
<div class="page-banner">
<div class="container">
<div class="page-banner-text">
<h1 class="block-title">Programs For Adults</h1>
<p>Programs to help children with disabilities in Western MA at all ages and levels of need.</p>
<div id="banner-donate-button">DONATE</div>
</div>
</div>
</div>
Per my comment, instead of using clip path to create your D (which is not supported very well), why not use border radius on your div.
* {
box-sizing: border-box;
}
.page-banner {
position: relative;
background: url(https://www.fillmurray.com/300/900) center center no-repeat;
background-size: cover;
width: 100%;
overflow: hidden; /* hide overflowing bits of circle */
min-height: 300px; /* just give enough height to fit text at smallest screen width size */
}
.circle {
background-color: rgba(50, 108, 116, 0.9); /* use rgba for transparent effect */
color: white;
transform: translate(-50%, -50%); /* move the circle left 50% of it's own width and up 50% of it's own height */
border-radius: 50%;
padding-top: 100%; /* this gives us a responsive square */
position: absolute;
top:50%; /* this vertically centers the circle */
left:0;
width:100%;
min-width:600px; /* this is the miniimum dimensions to allow circle to fill smaller screens */
min-height:600px;
}
.page-banner-text {
position: absolute; /* just positions the text on the right of the cirecle */
left: 50%;
top: 50%;
transform: translateY(-50%);
padding:2em;
width:40%;
}
<div class="page-banner">
<div class="circle">
<div class="page-banner-text">
<h1 class="block-title">Programs For Adults</h1>
<p>Programs to help children with disabilities in Western MA at all ages and levels of need.</p>
<div id="banner-donate-button">DONATE</div>
</div>
</div>
</div>
The only problem with it being responsive though is that as the screen gets wider, the D gets flatter (as the radius extends), but you can combat this by adding a max width and height to the circle div
To anyone looking to solve this with the clip-path property, you have a bit more control with the ellipse clip path. Using the code provided by the OP, I replaced circle with ellipse, and switched to percentages to allow for a slightly better responsive feel.
clip-path:ellipse(67% 100% at 8% 50%);
The first two numbers represent the height and width of the ellipse. The larger the first number, the wider the visible area is. The larger the second number, the wider the height. We're aiming for a D shape, so by adjusting the first number, we can make the D more or less prominent.
This is where the second two numbers, the positioning, comes into play. at 50% 50% centers it. By adjusting the first number, the X positioning, we can move it over where need fit . After playing around with the numbers, you should be able to get the D exactly how you'd like.
.page-banner {
background: grey;
width: 100%;
height: 300px;
background-position: top;
overflow: hidden;
}
.page-banner-text {
position: absolute;
background: #00525d8a;
padding-left: 100px;
width: 60%;
/* adjustments to snippet */
top: 10px;
left: 10px;
height: 300px;
/* this is the code for circle */
clip-path: ellipse(67% 100% at 8% 50%);
padding-right: 250px;
}
<div class="page-banner">
<div class="container">
<div class="page-banner-text">
<h1 class="block-title">Programs For Adults</h1>
<p>Programs to help children with disabilities in Western MA at all ages and levels of need.</p>
<div id="banner-donate-button">DONATE</div>
</div>
</div>
</div>
You could simply use
an inner circle element, which you can achieve with a border-radius equal to half the element's height and width
positioned via position: relative with negative top and left values
inside of an outer bounding box, clipped via overflow: hidden
A simple implementation:
#container {
height: 300px;
width: 100%;
background-color: gray;
overflow: hidden;
}
#circle {
height: 600px;
width: 600px;
background-color: rgba(0, 0, 255, 0.5);
position: relative;
top: -150px;
left: -375px;
}
<div id="container">
<div id="circle"></div>
</div>
This question already has answers here:
How to make half-square background in css
(3 answers)
Closed 4 years ago.
I'm trying to make a second background which should go from one edge to another edge. So in my example: The red BG should go from the top right, to the bottom left.
The question for me is, how would you/can i do this also for the Responsive view? So if i resize the window, the edges of the red background won't fit the actual edge anymore. Is this even possible with CSS, that the edges will always fit? I'm stuck at this point regarding the Responsive trick .. :)
Because if the screen is smaller you would have to adjust the 120deg, don't you? Media Queries are not really an option, because those are only working with Breakpoints. But it should work with every resized pixel.
Here's my example:
.background {
width: 100%;
max-width: 700px;
height: 300px;
background: gray;
position: relative;
}
.background:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background: linear-gradient(120deg, #cf0529 50%, transparent 50%);
}
<div class="background"></div>
See this reference here:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
The gradient you want would be:
background: linear-gradient(to bottom left, #cf0529 50%, transparent 50%);
I want to rotate some text for vertical display (a y-axis chart label). The text can be of any variable length (but is always on one line).
I've tried to rotate using CSS3 transforms (see JSFiddle):
.rotate {
transform: rotate(270deg);
}
However, the element's original width and height is retained even after rotation, as described in the spec:
In the HTML namespace, the transform property does not affect the flow of the content surrounding the transformed element.
Which means that the element's container width expands depending the label text length, affecting the position of the adjacent chart.
How do I rotate text and shrink its container to the new width? Any solution will be helpful, including JavaScript/jQuery solutions, or alternative approaches.
I found a workaround using absolute positioning. The rotated text can be absolutely positioned "relative to the border of its closest positioned ancestor". Explanation:
position: relative on container to make it the "closest positioned ancestor"
position: absolute on rotated text, set to bottom of container (minus line height)
rotate the text from the top-left corner
JSFiddle
.container {
position: relative; /*make container the closest positioned ancestor*/
border: 1px solid red;
display: inline-block;
height: 400px;
min-width: 30px; /*same as line-height of rotated text*/
}
.rotate {
text-align: center;
overflow: hidden;
height: 30px;
line-height: 30px;
width: 400px; /*matches the height of the container*/
position: absolute;
bottom: -32px; /*0 = bottom of container, then subtract (line-height+border)*/
border: 1px solid blue;
transform: rotate(-90deg);
transform-origin: top left;
}
Assumptions:
that text width can be set to a sensible value (e.g. height of container)
no line breaks in text (single-line solution)
This question already has answers here:
Is a concave border radius possible?
(6 answers)
Closed 7 years ago.
I am trying to create the following effect using a div and CSS3. To achieve the right side I used the border-radius property. Is there any way to make the border on the left concave?
Are you looking for something like this?
Basically insert a second div using :before and give it a background color the same as the background behind the div. Here's the code simplified, the JSFiddle makes some attempts to match the shape of your image.
div {
width: 100px;
height: 80px;
background: green;
border-radius: 0 45px 45px 0;
}
div:before {
content:"";
width: 45px;
height: 80px;
background: #fff;
border-radius: 0 45px 45px 0;
position: absolute;
}