This question already has answers here:
How to draw circle in html page?
(19 answers)
Closed 6 years ago.
In CSS it is allowed to write something like this.
#div-with-border {
width: 100%; // scales with parent wrapper
height: 30%; // scales with parent wrapper
border: 1px solid black;
border-radius: 10%;
}
If #div-width-border isn't a perfect square the border won't be a circle, since this means, that 10% of the width and 10% of the height are used for the border-radius (which differ). I would like to get perfect circles... I can't use px, since the border-radius depends on the height/width.
I'm sure that the width of #div-width-border is always greater than the height, of the element. I would need a border radius of the size 100% of element height to get a perfect circle, but just 100% won't do it, since it'll use the element width for one part of the radius calculation.
If you know the ratio between the width and the height, you may use the Slash-Annotation to specify different %-values for horizontal and vertical border-radius. An Example is below:
.wrapper {
width: 300px;
height: 300px;
margin: 0 auto;
}
.div-with-border {
width: 100%;
height: 25%;
background-color: blue;
border: 1px solid black;
border-radius: 10% / 40%;
}
<div class="wrapper">
<div class="div-with-border"></div>
</div>
Have you tried border-radius: 50%; ? Since you're saying that the div is a perfect square, setting border radius to 50% should work
Related
This question already has answers here:
Why is percentage height not working on my div? [duplicate]
(2 answers)
Closed 1 year ago.
For example, in the fiddle below, I have a single flex div.
It appears that setting the height to 100% has no effect on the div.
A div is display block by default and takes up 100% of the width. But obviously the height behaves differently.
https://jsfiddle.net/02wtuzjp/1/
#expand{
display: flex;
height: 100%;
border: 1px solid red;
}
<div id = 'expand'>
</div>
This appears to be expected behavior as there is not content in the div.
https://css-tricks.com/almanac/properties/h/height/
One solution is to use the units vh or more particularly 100vh.
I'm not sure it this is the proper or best way, however.
An element with a percentage based height, needs a parent reference for it to base its height on. You can add:
html, body {
height: 100%;
}
And your element will be 100% of the height:
html,
body {
height: 100%;
}
#expand {
display: flex;
height: 100%;
border: 1px solid red;
}
<div id="expand">
</div>
Per your edit:
You can certainly use 100vh to set the height, but then that element will always be 100 percent of the height of the viewport..no matter it's containing element.
For example:
#random {
height: 50px;
}
#expand {
display: flex;
height: 100vh;
border: 1px solid red;
}
<div id="random">
</div>
<div id="expand">
</div>
You can see that the height of your expand element is 100vh tall and creates a scroll because the height is the height of viewport, not the remaining space.
Resources:
Article on Medium
This question already has answers here:
Make a perfect circle around a div of variable height
(4 answers)
How can I ensure that text is inside rounded div?
(7 answers)
Closed 1 year ago.
Hi guys i have created circle using CSS shape.
I have used contentEditable="true" so the content of the circle can be edited.
The problem here is now when I edit the text inisde the circle it is going outside of the circle. What I am trying to do is when I add extra text the text should automatically move to next line inside the circle itself.
I don't want to increase the width and height of the circle.
Can anyone help me where I did mistake.
Here is my code :
.circle {
width: 50px;
height: 50px;
background-color: #40a977;
border-radius: 50%;
float: left;
shape-outside: circle();
}
<div contentEditable="true" class="circle">circle</div>
Can anyone help me where i did mistake.Thanks in advance.
You've created a circle and defined the height and width. As a result, where the circle would expand to fit all the text in, it instead stays at 50px by 50px. You can fix this by adding CSS
min-width: 50px;
min-height: 50px;
to the class. This says that the circle has to be at least 50px by 50px, but may be larger depending on the text inside. I hope this answers what you were asking!
You can't affect the width of an element to the height in pure CSS.
With JS you can create an event on modifications and adjust the height or padding (for the text to keep centered) depending on width value.
With a DOM modification, you can access on the parent width in CSS. If not defined, the parent will take the with of the child.
JS, same DOM
function updateCircle(circle) {
let width = Number.parseInt(getComputedStyle(circle).width);
let lineHeight = Number.parseInt(getComputedStyle(circle).lineHeight);
circle.style.paddingTop = (width - lineHeight) / 2 + 'px';
circle.style.paddingBottom = (width - lineHeight) / 2 + 'px';
};
// Modify on edit
document.getElementById('circle').addEventListener('input', function(){
updateCircle(this);
});
// On page load
updateCircle(document.getElementById('circle'));
#circle {
padding: 0;
background-color: #40a977;
border-radius: 50%;
float: left;
font-size: 16px;
line-height: 16px;
}
<div contentEditable="true" id="circle">circle</div>
CSS, different DOM
#circle {
padding: 0;
float: left;
}
#circle > div{
height: 16px;
background-color: #40a977;
border-radius: 50%;
padding: calc(50% - 16px / 2) 0;
font-size: 16px;
line-height: 16px;
}
<div id="circle">
<div contentEditable="true">circle</div>
</div>
I'm attempting to understand why in this codepen the two boxes aren't perfectly aligned.
https://codepen.io/mburke05/pen/BYXOGP
html
<div class="div_one">pixel</div>
<div class="div_two">percent</div>
css
.div_one {
border: solid red;
transform: translate(70px, 20%) ;
width: 140px;
height: 60px;
}
.div_two {
border: solid blue;
transform: translate(50%, 30%) ;
width: 140px;
height: 60px;
}
I thought I understood that, when using %'s rather than pixel or other values, that the % value was based on the height of the element itself rather than the % of the parent (which in this case would be the viewport.)
However, to achieve what I believe is alignment, I would need to set translate(48%, 30%) as the value. Why is this? Isn't 70 50% of 140, or is there more to it than I'm understanding.
As a follow-up, can anybody explain why this is the preferred way of centering an object vertically mathematically?
div {
box-sizing : border-box
}
By default in the CSS box model, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen. This means that when you set width and height you have to adjust the value you give to allow for any border or padding that may be added.
Read More here
.div_one {
border: solid red;
width: 140px;
height: 60px;
}
.div_two {
border: solid blue;
width: 140px;
height: 60px;
}
remove CSS property "transform", Both Div will align perfectly and if you want to move the position of the box means use padding or margin and if you want to fix in box position then use Position property
I know this question has been asked in another form very popularly here:
How do CSS triangles work?
and I have extensively read the entire thread, but it does not address what I'm trying to do.
I want to make a cross-browser equilateral triangle clip that is responsive.
I found a lot of css like this that uses pixels:
#triangle-up {
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 100px solid red;
}
But it's not responsive. I'm currently drawing it using polygon below like so:
.tri-Up {
-webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
But this is not compatible in Firefox. I've been exploring this question for weeks, but have yet to find a way to clip a equilateral triangle, have it be responsive, and have it work in firefox, chrome, and Safari.
Any thoughts or attempts/success at this would garner much of my appreciation and respect.
Yeah it can be done, I needed that a while ago, and found a solution to this issue right here:
you can use a <div> or some other that you think it can represent a triangle, and a :pseudo selector from it (actually you can use 2x <div> and leave out the :pseudo selector)
the :pseudo selector can be used to represent the triangle itself, like you posted in your question, with border prop.
the parent <div> acts like a mask that either shrinks/grows the :pseudo selector, using a combination of width and padding specified in percetage
as this mask grows, with your container, more of the triangle is revealed and as soon as it shrinks, it covers up the triangle
the border prop set on the :pseudo element acts like a max-width to which the triangle will grow, so you can specify some larger values to it, to the point you think that will the max that it needs to be
Kudos for the author of this solution, and more about this:
One div, a :pseudo element, and a responsive triangle
Two divs and a responsive triangle
Documentation website
Check out the demo here or the snippet bellow:
*,
*:after,
*before {
box-sizing: border-box;
}
h3 {
margin: 10px;
text-align: center;
}
.small-container {
max-width: 10%;
float: left;
}
.medium-container {
max-width: 30%;
float: left;
}
.large-container {
float: left;
max-width: 50%;
}
.fancy-triangle {
width: 50%;
height: 0;
padding-left: 50%;
padding-bottom: 50%;
overflow: hidden;
}
.fancy-triangle:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -2000px;
border-left: 2000px solid transparent;
border-right: 2000px solid transparent;
border-bottom: 2000px solid #4679BD;
}
<h3>Now isnt that nice?</h3>
<div class='fancy-triangle'></div>
UPDATE
Ok, since you need to actually mask a image in a sorta responsive triangle, the above method wont cut it.
Instead, you could use a svg and some percentage clip path points like so:
use the svg to draw up a triangle, used to clip the image if the clip-path isnt working properly custom points/shapes
then use the clip-path to draw a triangle with custom percentage points representing a triangle
Alternatively, you could a position absolute on the <img> wrapper, and set the width/height in some percentage values that will be bound to a set parent with a position relative, that will then grow/shrink with it.
Demo here
Resources
UPDATE V3
Instead of using a <img> tag you could alternatively use a <svg> with the src attr of you're image and it should work out pretty nice.
Demo here
Resources
.fancy-triangle-image {
max-width: 1200px;
-webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
clip-path: url(#triangle);
}
.fancy-triangle-image img{
width: 100%;
}
<div class='fancy-triangle-image'>
<img src='http://insolitebuzz.fr/wp-content/uploads/2014/10/test-all-the-things.jpg'/>
</div>
<svg display="none;">
<defs>
<clipPath id="triangle">
<polygon points="150 0, 300 300, 0 300" />
</clipPath>
</defs>
</svg>
The best bet I can think of is using vw as your unit on the triangle, as this is the only responsive unit that you can use in the border property. See gist here http://sassmeister.com/gist/1b0d70bf4cc35ff05fec
Browser support for vw is pretty good. http://caniuse.com/#search=vw
So I've seen this post: Can I scale a div's height proportionally to its width using CSS? and it sort of answers my Question. I can get divs to sclae porpotionally as I need. However, what I also need is to set a minimum height for those divs.
In this fiddle http://jsfiddle.net/FBZuB/1/ I have set up what I am trying to accomplish. The BLUE div is a general wrapper that then defines the height of the RED div based on the width of the BLUE div. However when I try to change the min-height on the RED div, the divs that I want to scale AND have a min-height, unexpected results occur.
I would think once I scale DOWN to the min-height point, the div would stop scaling and only change in width. However, it seems like setting the min-height just sets some sort of base point for the whole calculation and everything scales continually. I hope this makes sense.
The RED divs should scale up and down, but at a certain point, when the RED div hits its minimum height, it should stop scaling in height and only in width. I have accomplished this before with pure javascript, but since I read the post above, I am trying to get a CSS only solution.
Here is the code. You can ignore the content for now... I am focuses mainly on the red blocks. Proportionally scale width/height, until it hits the min-height and then it should stop scaling the height and only the width.
HTML
<div style="background: blue; width: 70%;">
<div id="left">
<div class="content"></div>
</div>
<div id="right">
</div>
</div>
CSS
div {
margin: 5%;
float: left;
background: red;
position: relative;
}
#left {
width: 50%;
padding-bottom: 60%;
min-height: 100px;
}
#right {
width: 30%;
padding-bottom: 60%;
min-height: 100px;
}
.content {
position: absolute;
width: 90%;
margin: 5%;
background: green;
top: 0;
left: 0;
height: 90%;
}
Unfortunately plain CSS is unable to calculate any expressions in all browsers except IE, and as such you will have to use at least some JavaScript to dynamically calculate the width.
I would probably do something like this in your html file.
Since you didn't specify how you are resizing your div, I'll assume that it's just when the window resizes.
<body onresize="
var left = document.getElementById('left');
if (left.clientHeight < left.style.min-height) {
left.style.cheight = left.style.min-height;
}
">
</body>