This question already has answers here:
How to curve the div from bottom with image background
(7 answers)
A way to curve (outside) an element in CSS3
(4 answers)
How to create uneven rounded sides on a div?
(1 answer)
Closed 2 years ago.
I'm new in css and I have a simple slider, and I want to add curved effect at the end
So I read about it and I found the easiest solution is to add a curved svg the put inside slider, but how can I add an svg there ?
I tried to create svg curve here but it didn't work.
<svg xmlns="http://www.w3.org/2000/svg" style="fill:#0e4f1f;">
<path d="M -14.73 -1.42 C -1.7 9.78, 8 9.89, 20.9 -1.81">
</svg>
My slider image
#main-slider {
width: 100%;
height: 528px;
}
<img id="main-slider" src="https://via.placeholder.com/1365x528?text=Slider">
Can be done by using this value as border-radius
border-radius: 0% 0% 60% 60% / 0% 0% 20% 20%;
You can play around with the value to achieve different curve radius
#main-slider {
width: 100%;
height: 528px;
border-radius: 0% 0% 60% 60% / 0% 0% 20% 20%;
}
<img id="main-slider" src="https://via.placeholder.com/1365x528?text=Slider">
Related
This question already has answers here:
CSS transform origin issue on svg sub-element
(1 answer)
SVG. Reverse image using css. Keep image at the same place
(3 answers)
Closed 1 year ago.
I'm attempting a very simple rotation of an svg rect element. I want this element to rotate relative to its center and I'm trying to achieve this using the transform-origin property (see snippet). Despite attempting to rotate from center using "center" or "50%", it never wants to rotate from its true center.
Can anyone explain why this doesn't work? I've seen similar posts about transform-origin being a css property, not an svg property but I believe this is outdated now and transform-origin is supposed to work.
This method works fine on div elements, just not svg elements.
svg {
border: solid;
}
svg > rect {
animation: test 3s infinite;
}
#keyframes test {
100% {
transform: rotate(360deg);
transform-origin: center center;
}
}
<svg width="200" height="110" viewBox="-200 -400 1000 1000">
<rect width="600" height="300" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
Don't use the transform-origin in the keyframe and don't forget setting transform-box: fill-box; also.
svg {
border: solid;
}
svg>rect {
transform-box: fill-box; /* you need this for SVGs */
transform-origin: center center; /* moved here */
animation: test 3s infinite;
}
#keyframes test {
100% {
transform: rotate(360deg);
}
}
<svg width="200" height="110" viewBox="-200 -400 1000 1000">
<rect width="600" height="300" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
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>
This question already has answers here:
Cut Corners using CSS
(16 answers)
Closed 2 years ago.
As seen in the picture, the background colour is magenta and the button is white.
Right bottom corner of the button is not either rectangular or rounded but kind of slash off.
Can I achieve this using CSS?
Here is the example with new property clip-path.
You can do experiments on https://bennettfeely.com/clippy/ site
div {
width: 100px;
min-height: 50px;
clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);
background: lightblue;
}
<div class="btn">
button
</div>
This question already has answers here:
How to make an image center (vertically & horizontally) inside a bigger div [duplicate]
(36 answers)
Closed 7 years ago.
I want this image be right in the center of the page, in a section but it is not working, btw I'am using jade and sass.
Jade:
section.believe(data-section-name='texture', <='', body='')
img.minion(src="/images/IMG_6219.jpg")
Sass:
.minion
top: 50%
left: 50%
padding: 100px
margin: 0 auto
height: 10%
transform: rotate(90deg)
This is what keeps happening
try this
.minion
position: absolute
top: calc(50% - 400px)
left: calc(50% - 400px)
margin: 0
400px = half of the image width/height
I am working on a website on which we have use parallax effect. In that there are some images which are triangle shaped, like this
& the image is transparent because it overlaps the above DIV. I am trying so many things with css. but didn't get the desired result. I achieve that desired result with fixed width. Check this http://jsfiddle.net/eJ7Sf/2/ but does not work with fluid width. Check what i still try but didn't work
http://jsfiddle.net/ceGGN/3/
http://jsfiddle.net/eJ7Sf/1/
NOTE: i know about css3 MASK property but it's not work in firefox previous browsers. I want the capability till firefox 3.6.13
Updated Answer (Pure CSS3)
Extreme requirements sometimes need extreme solutions. I've built upon my original answer (below) to make a pure css solution that works (and can be made to work better, if you want to invest the time in it). The current example is a bit "choppy" in rendering, which may be okay for you, but if not, you will need to extend the already obscene number of #media queries that are driving it (it would likely be much easier to implement using LESS or SASS; I put together a formula driven excel spreadsheet to help rapidly generate the numbers). It uses this code:
HTML
<div class="box">
<img src="yourImage.jpg" />
</div>
CSS
.box{
height:300px;
min-width: 100px; /*could be different, but you ought to have some min*/
overflow:hidden;
}
.box img {
height: 100%;
width: 100%;
-ms-transform-origin: 100% 100%; /* IE 9 */
-webkit-transform-origin: 100% 100%; /* Safari and Chrome */
-moz-transform-origin: 100% 100%; /* Firefox */
-o-transform-origin: 100% 100%; /* Opera */
transform-origin: 100% 100%;
}
/*Sample... you need alot of these--my fiddle example has 51*/
#media screen and (min-width: 100px) {
.box {
-ms-transform:skewY(45deg);
-moz-transform:skewY(45deg);
-webkit-transform:skewY(45deg);
-o-transform:skewY(45deg);
transform:skewY(45deg);
}
.box img {
-ms-transform:skewY(-90deg);
-moz-transform:skewY(-90deg);
-webkit-transform:skewY(-90deg);
-o-transform:skewY(-90deg);
transform:skewY(-90deg);
}
}
Here's how to calculate the degrees
Assuming height: 300px with the narrow side approximately 100px tall and equal angles on the trapezoid. This means the upper and lower offset is (300px - 100px) / 2 = 100px. Then the .box angles are set off the #media query min-width amounts according to this formula:
Angle = arctan(100/min-width) /*100 is the upper/lower offset as above*/
For the .box img angle take the Angle and multiply by -2. So that will yield your .box and .box img media queries and transforms as this pseudocode:
#media screen and (min-width: [your target min-width]) {
.box {transform: skewY(Angle)}
.box img {transform: skewY(-2*Angle)}
}
How smooth it functions depends completely upon how micro scale you make your changes to min-width to get a new angle setting. As I stated in my comment in the CSS code above, my example uses 51 media query calls and still has some choppiness to it.
Would it be better to use some javascript solution instead... probably, but that is totally up to the designer, so I offer this here as purely a proof of concept that it can be made to work with pure css.
Original Answer
This seems to be achieving a fluid width. I don't know how much control you want of either how much or what part of the image is being shown, so it may not entirely fit your needs, but it does make a flexible width image using transforms to give it a fake perspective look.
With SVG clip-path
You can achieve this shape with an inline SVG and the clipPath element :
<svg viewbox="0 0 10 6.7">
<defs>
<clipPath id="clip">
<polygon points="10 0, 10 6.7, 0 4.7, 0 2" />
</clipPath>
</defs>
<image xlink:href="http://i.imgur.com/RECDV24.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#clip)"/>
</svg>
With CSS clip-path
You can also achieve this shape with the CSS clip-path property. Browser support is pretty low (see canIuse) but it is an easy approach.
Here is an example :
img{
-webkit-clip-path:polygon(0% 20%, 100% 0%,100% 100%,0% 80%);
clip-path:polygon(0% 20%, 100% 0%,100% 100%,0% 80%);
}
<img src="http://i.imgur.com/5NK0H1e.jpg" alt=""/>
If you play a bit with pseudoelements and 2DTransforms (supported since Firefox 3.5) you can achieve this effect : http://jsfiddle.net/fcalderan/T5KPA/1/
I tried on Chrome and Firefox. For Opera and IE9 you need to add proprietary prefixes.
Markup is really essential:
<figure class="triangle">
<img src="http://cssglobe.com/lab/angled/img.jpg">
</figure>
and the css to obtain this effect:
img { display: block; }
.triangle {
position : relative;
overflow : hidden;
padding : 0; margin: 0;
display : inline-block;
}
.triangle:after,
.triangle:before {
content : "";
position : absolute;
z-index : 2;
left : -50%;
width : 200%;
height : 40%;
display : block;
background : #fff;
}
.triangle:before {
top: -24%;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.triangle:after {
bottom: -24%;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
}
I coloured the rotated pseudoelements using white but, of course, you can change the color so it fits the real background color