My goal is to design a square that occupies 50% of the container's width and height (and adjusts automatically?). Inside this square, I aim to include another square with rotated corners that touch the edges of its parent (without overflow). Additionally, it must be responsive in its layout.
.square {
height: 50%;
width: 50%;
.square-inner {
transform: rotate(45deg);
background: red;
height: ??:
width: ??;
}
}
If you want to create a unique design, consider using a combination of relative and absolute positioning along with percentages.
Take a look at the example below:
.square {
width: 50%;
padding-top: 50%;
background: blue;
position: relative;
}
.square-inner {
transform: rotate(45deg);
background: red;
height: 70%;
width: 70%;
margin: auto;
position: absolute;
top: 15%;
left: 15%;
}<div class="square">
<div class="square-inner">
</div>
</div>In the scenario where x represents the length of the outer square's side, the length of the inner square should be approximately sqrt(2)/2 * x (≈ 0.707x). More insights on the mathematical reasoning behind this can be found here.
When working with sass, as there is no built-in sqrt function, a suitable estimation approach can be implemented. Further information on how to do this mathematically can be accessed through this link: more math.
@function sqrt($square, $tolerance: .001, $estimate: $square/2) {
@if abs($square - $estimate*$estimate) < $tolerance {
@return $estimate;
}
@return sqrt($square, $tolerance, ($estimate + $square/$estimate)/2);
}
To incorporate this concept in your sass code:
$size: 200px;
$halfSqrt2: sqrt(2)/2;
.square {
height: $size;
width: $size;
background: pink;
display: flex;
justify-content: center;
align-items: center;
.square-inner {
transform: rotate(45deg);
background: red;
height: $halfSqrt2 * $size;
width: $halfSqrt2 * $size;
}
}
Important note:
width: 50%;
height: 50%;
The above styling won't generate a perfect square unless the container itself is a square.
After encountering a larger issue, I found that I could reduce it to a simpler scenario: To see the problem in action, check out this jsFiddle link: http://jsfiddle.net/uUGp6/ Here is the simplified HTML code: <div class="box"> <img class=" ...
I encountered an issue while running npm run prod npm run prod > @ prod /opt/atlassian/pipelines/agent/build > encore production Running webpack ... ERROR Failed to compile with 2 errors4:15:08 PM error in ./web/assets/src/scss/styles.scss Module ...
My current task involves adjusting the width of containers while also monitoring changes in my @Input since the DOM structure is dependent on it. @Input('connections') public connections = []; @ViewChildren('containers', { read: Elemen ...
Is there a way to dynamically remove the space between removed chips and older chips in Material-UI when deleting one of them? <div className="row contactsContainer"> {contacts.map((contac ...
I have been struggling for quite some time to create a mobile menu using Bootstrap 4. My goal is to display the 3 brand names and the toggle button on the same row in the mobile menu. However, when I click the toggle button, the 3 brands end up below the c ...
Do older versions of Firefox, such as version 3.0, have unique Conditional Comments available for them? ...
When you add a book, you will see the item added to the table with a cool font and an X icon for removal. However, I noticed that when hovering over the icon to increase its size, it slightly shifts the text in the other cells. Is there a way to prevent th ...
Looking to stylize the list items with decimal, upper-alpha, lower-alpha, upper-roman, and lower-roman for each of the first five levels? I attempted to achieve this by adding CSS in my pad.css file. .list-number1 li:before { content: counter(first)") " ...
Struggling with my z-index arrangement here. In a nutshell, I have an absolute div positioned beneath a relative div called container. Inside the container, there are three divs: left, center, and right, all with absolute positioning. I am trying to get ...
Currently facing an interesting challenge, but I'm confident there's a clever solution out there. The issue at hand is with a table that has three different sorting states for its columns: unsorted, where no icon should be displayed, ascending, ...
On my website powered by Elementor Pro, I have implemented custom CSS to animate the Shape Divider with a "Brush Wave" style. Below is the code snippet: .elementor-shape-bottom .elementor-shape-top .elementor-shape body { overflow-x:hidden; } @keyframes ...
I'm struggling with the layout of my table header buttons. Whenever I add a dropdown button, it messes up the alignment and makes the whole thing look unattractive. Here's the code for my dropdown button: <div class="dropdown"> ...
Help needed with website responsiveness issue! The site works fine on most screen sizes, but when it reaches around 414px in width, the intro section becomes too wide for the screen. Any ideas on what could be causing this problem? html: <nav id="m ...
Is This CSS Syntax Correct? css: the meaning of * mark What is the function of * in CSS? I came across some code here that included it: .center-wrapper{ text-align: center; } .center-wrapper * { margin: 0 auto; } Could this be a mistake? ...
I am facing an issue with a "message" element that needs to be resized if the text exceeds its width within certain limits, similar to how it works in messaging applications. .message { position: relative; color: white; background: #182533 ...
Can the background image of a div be changed by selecting a button outside of the div? For example: HTML <div id="change"></div> <div id="buttons"> <button class="button1">this</button> <button class="button2"> ...
I'm trying to create a dynamic Bootstrap popover with HTML content when hovering over a button. Here's what I have so far: $(".btn.btn-navbar").hover(function() { html = '<ul class="nav"><li><a href="#">hello</li>& ...
In my application, I am utilizing d3js charts as widgets. When a widget is added, a function is triggered to create and draw the widget (svg element) in a specific div. The issue arises when the same widget is added twice, causing the d3js chart (svg elem ...
Is there a way to create a jQuery Slider similar to the one showcased in this example? I have searched high and low for tutorials or plugins that can help me achieve the same design without any luck. ...
How can I create a dynamic table with variable-sized columns that always fills the parent area, regardless of the number of cells? The goal is to allow scrolling if needed, but ensure the table spans the entire parent space even with few cells. I've ...