This question already has answers here:
CSS 3 Shape: "Inverse Circle" or "Cut Out Circle"
(7 answers)
Transparent half circle cut out of a div
(8 answers)
Creating right curve using css3
(1 answer)
Closed 2 years ago.
In the picture you can see the Rough desired layout of SAP (rotated by 90 degrees clockwise).
My first instinct would be to split it into 3 components:
the nav-bar on top
simple div containing some text
and for the bottom I was stuck. After searching I opted for a svg path component and combined all 3 in a parent component.
Any other components will be rendered below the curve.
So far it works. But I am curious if there are other, maybe better, solutions to this (which I am sure there are).
Thanks in advance
Another way to achieve this would be to add an ::after element to the navbar with some border-radius to make the curve. Here is an example:
#navbar {
position: relative;
background-color: lightblue;
padding: 30px;
}
#navbar::after {
content: "";
position: absolute;
height: 30px;
width: 100%;
background-color: lightblue;
bottom: 0;
left: 0;
transform: translateY(50%);
border-radius: 0 0 100% 100%;
}
<div id="navbar">
Website
</div>
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 4 months ago.
At first, my picture is like this, the avatar can be displayed in the center。
And the CSS code for class .avator is:
.idx_box .search_box .avator {
width: 0.64rem;
height: 0.64rem;
border-radius: 50%;
background: #feb5b4;
}
The CSS code for img is：
.idx_box .search_box .avator img {
width: 0.3rem;
height: 0.3rem;
margin: 0 auto;
-webkit-transform: translateY(45%);
-ms-transform: translateY(45%);
transform: translateY(45%);
}
where 1rem is equal to 100px；
However, when I changed the picture, the horizontal centering effect didn't work. The CSS code is still the same as above and has not changed. I can't find the reason. Picture as shown：
Thanks！
Just add this 'text-align:center;' to .avator class.
I think the reason it didnt work, was because the image wasnt centrally aligned in the first instance. This showed in the second instance when you put a smaller image.
By the way, this 'margin: 0 auto;' inside the img, does nothing.
This question already has answers here:
Can I change the height of an image in CSS :before/:after pseudo-elements?
(14 answers)
Closed 3 years ago.
I have the following line in my stylesheet that calls my website logo.
.navbar__logo::before{
content: url("../images/logo/logo.svg");}
How can I scale this down? I'm learning a bit about viewPort & viewBox but cant seem to get it to work.
Thanks in advance.
After declaring a viewBox in your svg file, you should definitely give your pseudo-element explicit width and height:
.navbar__logo::before {
content: url("../images/logo/logo.svg");
width: 200px;
height: 50px;
}
Beyond that, if you wish to dynamically resize your pseudo-element and / or animate the scaling you can use transform: scale():
.navbar__logo::before {
content: url("../images/logo/logo.svg");
width: 200px;
height: 50px;
transform: scale(0.5);
}
This question already has answers here:
Any way to declare a size/partial border to a box?
(6 answers)
Closed 3 years ago.
I'm doing some work on my website, I wanted to put that border thing with ::after(I don't want to do it with border-bottom because I want to set specific width) method, unfortunately when I'm trying to set the "::after" to position "absolute", and the container of it to position "relative", but the problem is the container somehow gets the position "absolute" which I don't want it to
I tried to set inline style but it doesn't give best performance.
HTML:
<h2 class="special-heading">Our Team</h2>
CSS:
.special-heading {
position: relative
}
.special-heading:after {
content: '';
display:block;
position: absolute;
top: 10px;
left:0;
width: 40px;
border-bottom: 3px solid #333;
}
I would try this instead of top: ...px
margin-top: 10px;
But not sure!
I think you can achieve what you want to achieve by replacing the line top: 10px with bottom: 0.
I tested it in codepen and the .special-heading got the position: relative properly.
This question already has answers here:
Why does order of transforms matter? rotate/scale doesn't give the same result as scale/rotate
(2 answers)
Simulating transform-origin using translate
(2 answers)
Closed 3 years ago.
I have a 100px*100px div with a square image as child. This image has a scale of 1.5, so the size is 150px*150px.
Now if I apply on the image a translation of 25px (X or Y), should I not have the image at the edge of its parent?
Currently I need to translate of 16px to get to the edge, that's make no sense to me. What is the calcul here?
I'm pretty sure I missing the obvious here, but I'm having a hard time to figure it out.
.parent {
width: 100px;
height: 100px;
border: 1px solid red;
margin: 0 auto
}
img {
width: 100%;
height: auto;
transform: scale(1.5) translateY(-25px);
z-index: -1;
position: relative;
}
https://codepen.io/geosenna/pen/pYNyjR
This question already has answers here:
Create a slanted edge to a div [duplicate]
(5 answers)
Closed 3 years ago.
Let's say I have a container div with two divs inside. This is the effect I want to get:
<div>
<div></div>
<div></div>
</div>
In addition, I need it to be responsive, width and height in % or viewport units. And I need to fill them with various content, some content might even be partially hidden under one of these divs.
Unfortunately CSS is not THAT advanced re: skew affecting child elements... I am sure what you are looking for is that the content will wrap at the angle that you have created there... I agree that the only way is as #user5151179 pointed out, with the 2D transforms... Just check for browser compatibility with this (There's no easy solution for solving this for all and every browser as you would know).
I think the easiest way would be for you to add a background image to the outer div, and have two rectangular divs where you can add content etc. inside the outer div, thus your text not wrapping at an angle, if that makes sense.
Try the following
<div class='container'>
<div class='div div1'>
</div>
<div class='div div2'>
</div>
<style>
.container{
height:50px;
width:100px;
position:relative;
overflow: hidden;
}
.div1 {
background: none repeat scroll 0 0 #0000FF;
left: -8px;
}
.div2 {
background: none repeat scroll 0 0 #000000;
right: -7px;
}
.div{
width: 57px;
top: -10px;
transform: rotate(20deg);
position: absolute;
height: 72px;
}
There is no css method to do it. But we can do it by some css tricks like what i did above.