I have a div-container, a bootstrap collapse element. In it there is another round element, which changes position, when using the collapse function. Means: It should be positioned on the top-border, but behind the bottom-border.
How would you solve this task?
My first idea was to use object-fit to cut off the bottom part of the round element, but that did not look well with transition and collapse. Second idea was to use a thick border-bottom as an after-pseudo-element to cover the bottom part, which did not work so far.
Do you have any ideas or have you done something like that?
Thank you!
Use clip-path:
.box {
border: 3px solid;
height: 200px;
margin: 50px;
position: relative;
clip-path: inset(-200% 0 0); /* a big negative value on the top to clip only left/right/bottom */
transition: 1s;
}
.box:hover {
height: 50px;
}
.box:before {
content: "";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 100px;
height: 100px;
border: 3px solid;
border-radius: 50%;
background: red;
}
<div class="box">
</div>
You may also use transform3D + background to hide portions of it:
div {
margin:0 1em;
padding:1px;
display:flex;
padding-bottom:2em;
background:white;
transform-style: preserve-3d;
}
div[class] {
border:solid;
border-bottom:none;
height:150px;
transition:0.25s;
}
div[class] + div {
border-top:solid;
}
div[class]:hover {
height:60px;
}
div span {
height:150px;
width:150px;
align-self:center;
background:red;
border-radius:50%;
margin-right:1em;
border:solid;
margin-left:auto;
margin-bottom:-2.2em;
transform:rotatex(-0.15deg) translatez(1px);;
}
<div>Whatever stands here</div>
<div class>
<p>hover to collapse</p>
<span></span>
</div>
<div>Whatever stands next</div>
Related
Please refer to this jsfiddle: https://jsfiddle.net/b53te5qb/1/
I am attempting to make each of these div widths transition nicely over the other.
Right now it is an instant effect, but I would like for it to transition smoothly. When I attempt the transition it starts to get buggy.
Here is the HTML:
<div class="outer">
<div class="color left"></div>
<div class="color right"></div>
</div>
And here is the CSS so far:
.outer {
position: relative;
height: 100px;
width: 200px;
}
.color {
height: 50px;
width: 50%;
float: left;
transition: width 0.3s linear;
-webkit-transition: width 0.3s linear;
}
.color:hover {
width: 100%;
position: absolute;
}
.left {
background-color: #ff0;
}
.right {
background-color: #0ff;
}
I am open to restructuring this however I would need to in order to complete the task. I just provided this as a base example.
If you're just doing this with solid colors, I would transition transform: scaleX(). Using transition with transform will give you better performance.
.outer {
position: relative;
height: 100px;
width: 200px;
}
.color {
height: 50px;
width: 50%;
float: left;
transition: transform 0.3s linear;
-webkit-transition: transform 0.3s linear;
transform-origin: 0 0;
}
.color:hover {
transform: scaleX(2);
}
.left {
background-color: #ff0;
}
.right {
background-color: #0ff;
transform-origin: 100% 0;
}
<div class="outer">
<div class="color left"></div>
<div class="color right"></div>
</div>
Here you go: https://jsfiddle.net/prowseed/b53te5qb/10/
Two techniques, one with flexbox and one with position absolute, pick any :)
.outer {
position: relative;
height: 100px;
width: 666px;
display:flex;
}
.color {
flex: 1;
height: 100%;
transition: .3s;
}
.color:hover {
flex-basis:100%;
}
.outer2 {
margin-top:100px;
position: relative;
height: 100px;
width: 666px;
}
.outer2:hover .color {
width:0;
}
.outer2 .color {
position:absolute;
top:0;
left:0;
bottom:0;
width:50%;
}
.outer2 .color + .color {
left:auto;
right:0;
}
.outer2 .color:hover {
width:100%;
z-index:2;
}
You'll need to position them absolutely in order to avoid them from moving.
https://jsfiddle.net/b53te5qb/6/
I would highly recommend not transitioning the width, much better would be to transition transform: translateX(), since it will be hardware accelerated and much smoother: https://jsfiddle.net/b53te5qb/8/.
It still needs polishing, but the idea is there. (note the overflow: hidden to avoid showing the excess.) Another improvement would be to have two elements on top (50%/50% width) that trigger the hover via javascript, since when the elements move it's difficult to keep the hover on them, or to remove the hover without leaving the .outer component.
Hope it helps.
I am trying to create a div with a background image (background-size:cover) with this shape cut out in the center top of the div.
The div above the div I want to cut this shape out of has background-image:cover on it as well. I'm trying to do this with a CSS shape, moving the lower div up using a negative margin top, so the background image on the div above shows through the cut out shape.
Note: The shape has to look identical or almost identical to the image, as it is part of a site designed by someone else, and they are very specific with their designs.
Anyone out there know how to create this shape?
EDIT: #SZenC offered a really cool solution that I implemented, except it leaves me with colored shapes overlayed on top of background images. See image:
I need the light blue pattern to show through where the gray is, and the purple texture to show through where the white is. I'm not sure at this point if this is possible, at least with CSS.
The best solution using CSS would be to use some nested elements.
You could create a div (.pointy) with two other divs inside it (.curve-left & .curve-right).
The inner divs should be sided so that they each have half of the curve. So if your curve drops 10px and goes 20px horizontal, it's height should be 10px and the width 20px. Then give it a border radius in the top-left or top-right corner of 100%. Now the curve will go trough the entire div. You could then give it a gray background-color and the parent div white in the background. Then some simple CSS-tricks to center the .pointy-div and do the backgrounds, and voila, there is your curvy triangle-y thingy.
So example below.
#c1 {
position: relative;
width: 200px;
height: 190px;
overflow: hidden;
}
#c2 {
position: relative;
top: 0px;
width: 200px;
height: 200px;
background-color: gray;
}
.pointy {
position: absolute;
top: 0px;
left: 50%;
margin-left: -20px;
width: 40px;
height: 10px;
background-image: url("http://lorempixel.com/output/technics-q-c-200-200-4.jpg");
background-position:center bottom;
}
.pointy>.curve-left,
.pointy>.curve-right{
position:absolute;
background-color:red;
width:20px;
height:10px;
background-image:url("http://lorempixel.com/output/technics-q-c-200-200-1.jpg");
}
.pointy>.curve-left{
border-top-right-radius:100%;
background-position:120px 0;
left:0;
}
.pointy>.curve-right{
border-top-left-radius:100%;
background-position:80px 0;
right:0;
}
<div id="c1">
<img src="http://lorempixel.com/output/technics-q-c-200-200-4.jpg" />
</div>
<div id="c2">
<div class="pointy">
<div class="curve-left"></div>
<div class="curve-right"></div>
</div>
<img src="http://lorempixel.com/output/technics-q-c-200-200-1.jpg" />
</div>
Here you could use a couple of pseudo elements with border radius to create that curved shape.
note there are multiple elements in this demo to show how this could be used in practice
.image {
height: 300px;
width: 80%;
background: url(http://lorempixel.com/900/500);
position: relative;
display: inline-block;
}
.shape {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: url(http://lorempixel.com/900/400);
background-position: 0 60px;
}
.shape:before,
.shape:after {
content: "";
position: absolute;
background: inherit;
height: 100%;
top: 0;
width: 50%;
transform: translateY(-100%);
}
.shape:before {
left: 0;
border-radius: 0 50% 0 0;
background-position: 0 90px;
}
.shape:after {
left: 50%;
border-radius: 50% 0 0 0;
background-position: -100% 90px;
}
<div class="image">
<div class="shape"></div>
</div>
Another, more in practical approach (with responsiveness), would be something like:
.wrap{
width:100%;display:inline-block;
position:relative;
height:600px;
}
.wrap img:first-child{
top:0;z-index:5;
}
.wrap img:last-child{
top:40%;
}
.wrap img{
position:absolute;
height:50%;width:100%;
}
.wrap .splitter{
z-index:10;
position:absolute;
top:40%; width:100%;
height:10%;
}
.wrap .splitter:before, .wrap .splitter:after{
content:"";
position:absolute;
width:50%;
height:100%;
background-size:200% 500%;
border-radius: 0 100% 0 0;
}
.wrap .splitter:after{
left:50%;
background-position:-100% 0;
border-radius: 100% 0 0 0;
}
.wrap .partA:before, .wrap .partA:after{ background-image:url("http://lorempixel.com/450/250");}
<div class="wrap">
<img src="http://lorempixel.com/900/500"/>
<span class="splitter partA"></span>
<img src="http://lorempixel.com/450/250"/>
</div>
Is it possible to make this shape with a single html element?
I want to use it for cropping images, that's why it would be easier if it was only one element
Is it possible to make that shape using a single element?
YES
div {
width: 80px;
height: 140px;
background: red;
position: relative;
}
div:before,
div:after {
content: "";
display: block;
width: 110%;
height: 60px;
background: white;
position: absolute;
left: -14px;
}
div:before {
transform: rotate(-20deg);
top: -40px;
}
div:after {
transform: rotate(20deg);
bottom: -40px;
}
<div></div>
Note: Some tweaking may need to be done to get it as you want, but you get the idea.
Would I recommend using it for cropping? No. To create this shape the :before and :after elements are white (the background colour) so this would only work if you had a plain background. Its doable but not the best.
Solution 1
If you are looking to use a solid colour background, you could look to use a border on some pseudo elements.
For a quick demo:
div {
background:url(http://lorempixel.com/300/300);
height:300px;
width:300px;
position:relative;
}
div:before, div:after {
content:"";
position:absolute;
left:0;
}
div:before{
top:0;
border-right:300px solid transparent;
border-top:100px solid white;
}
div:after{
bottom:0;
border-right:300px solid transparent;
border-bottom:50px solid white;
}
<div>
</div>
Solution 2
An alternative would be to use perspective and rotation (note. prefixing would be required):
div{
width:200px;
height:200px;
transform:perspective(300px) rotateY(-20deg);
margin-top:50px;
overflow:hidden;
}
<div>
<img src="http://lorempixel.com/300/300"/>
</div>
Alternatives
Further alternatives include:
SVG
Clip-path (although browser support isn't brilliant)
How can I make the following with HTML and CSS, when I have been provided with background-image.
<span class='some-cl'> defence personnel </span>
So a variation of it is possible with CSS, but my version is the ugliest piece of shit you'll find. Check it out: http://jsfiddle.net/7s4L0jhy/
I have an extra element for the half circle thing, but other than that, it's all variable according to the text in your element.
.p {
border: 3px solid #fff;
border-top: 0;
display: inline-block;
margin: 0 auto;
padding: 30px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
And then I create the top bar, but leave space for the circle:
.p:before {
content: '';
position: absolute;
right: calc(50% + 35px);
left: -3px;
height: 3px;
top: 0;
background: #fff;
}
.p:after {
content: '';
position: absolute;
left: calc(50% + 35px);
right: -3px;
height: 3px;
top: 0;
background: #fff;
}
And lastly, the fake circle thingy:
.p .bar {
position: absolute;
height: 70px;
width: 70px;
border-radius: 50%;
border: 3px solid #fff;
border-left: 0;
border-bottom: 0;
border-right: 0;
top: -30px;
left: 50%;
transform: translateX(-50%);
}
As per the other answer, an image would definitely be easier for you, but this should work for anything ie10+. Good luck.
There are many approaches to solve this. However I think the requirement here is high scalability, that is we can change the size of the outside element (the wrapper) and the shape should keep scaling accordingly. Doing so requires a little trick relating to overflow:hidden, the top shape includes a nearly half circle at center and the 2 lines besides, the trick here is we need to fix the ends (of the 2 lines) connecting to the nearly half circle and let the other ends free, so that when scaling up/down the overflow:hidden will cut off those ends if there is any error in calculation.
Here is the code:
HTML:
<div class='frame'>
<div class='top'>
<div class='peak'></div>
</div>
<div class='content'>
Defense personnel
</div>
</div>
CSS:
.frame > .top, .top > .peak {
position:absolute;
}
.frame {
position:relative;
}
.frame > .top {
overflow:hidden;
left:-3px;
right:-3px;
padding-top:100%;
bottom:100%;
}
.frame > .top:before, .frame > .top:after {
content:'';
position:absolute;
border-top:3px solid white;
width:30%;
bottom:0;
}
.frame > .top:before {
right:70%;
}
.frame > .top:after {
left:70%;
}
.top > .peak {
border:3px solid white;
border-radius:50%;
left:50%;
width:40%;
padding-top:40%;
bottom:0;
-webkit-transform:translate(-50%,44%);
}
.frame {
width:300px;
height:200px;
margin-top:100px;
border:3px solid white;
border-top:0;
}
.frame > .content {
width:100%;
height:100%;
text-align:center;
padding-top:20px;
font-size:30px;
color:white;
}
body {
background:url(http://lorempixel.com/800/600);
}
Demo.
Try resizing the .frame and you'll see how flexable it is.
.some-cl{background:#003 /*bg color*/ url(your_image.jpg) no-repeat 50%; text-transform:uppercase; text-align:center; padding-top:40px /*adjust at will */ }
there are better and more complex methods, but since you're asking extremely basic CSS questions, I assume this should be enough
I am stuck here. Please help.
I want to make the following through css.
But when I use CSS positioning, I am getting this output
The fourth(GREEN) layer should go under first layer(BLUE) which is not happening.
This is the code I used.
HTML:
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
CSS:
div{
height:100px;
width:100px;
border:solid 1px;
}
.box1{
position:relative;
left:500px;
background-color:#00d8ff;
}
.box2{
position:relative;
left:570px;
top:-30px;
background-color:#f6ff00;
}
.box3{
position:relative;
left:500px;
top:-60px;
background-color:#ff69fa;
}
.box4{
position:relative;
left:430px;
top:-230px;
background-color:#24ff00;
}
JSFiddle: http://jsfiddle.net/rkubs/
Even I tried to use Z-index. But no use. Help me. Thanks in advance.
WORKING DEMO :before
senario:
Using only one pseudo-element :before you just need to set border-top and border-right then give it an absolute position on the bottom left of div2
With the same HTML code as OP all you need is a Pseudo-element :before or :after combine witn z-index. To make it easy i put numbers in your HTML.
Note: you habe to set position relative to the element with the pseudo, the set the top border and the right border you can skeep that using box-shadow too see WORKING DEMO WITH BOX-SHADOW.
HTML
<div class="box1">1
</div>
<div class="box2">2
</div>
<div class="box3">3
</div>
<div class="box4">4
</div>
CSS
div{
height:100px;
width:100px;
border:solid 1px;
}
.box1{
position:relative;
left:500px;
background-color:#00d8ff;
z-index:3;
}
.box2{
position:relative;
left:570px;
top:-30px;
background-color:#f6ff00;
z-index: 3;
}
.box2:before{
content: '';
position: absolute;
bottom: -2px;
left: -2px;
width: 32px;
height: 30px;
border-top: 1px solid black;
border-right: 1px solid black;
z-index: 14;
background-color: #ff69fa;
}
.box3{
position:relative;
left:500px;
top:-60px;
background-color:#ff69fa;
z-index:1;
}
.box4{
position:relative;
left:430px;
top:-230px;
background-color:#24ff00;
z-index:2;
}
WORKING DEMO WITH BOX-SHADOW
Here you just need to change the width and height of .box2.
senario:
you choose one div in my case div2 you don't set the background-color then reset the the borders border:none; .
Since you have set div width, height and position relative you can now set :before and 'after' width a 100% width and 50% height, one on the top and the other on the bottom, then for :before set border-top and for :after set border-bottom.
Now set for both of then border-left and border-right.
div{
height:100px;
width:100px;
border:solid 1px;
position:relative;
}
.box1{
left:500px;
background-color:#00d8ff;
z-index:3;
}
.box2{
left:570px;
top:-30px;
border:none;
}
.box2:before,.box2:after{
content: '';
position: absolute;
background-color:#f6ff00;
width: 100%;
height: 50%;
left: 0;
border-left:1px solid black;
border-right:1px solid black;
}
.box2:before{
top: 0;
z-index: 3;
border-top:1px solid black;
}
.box2:after{
bottom: 0;
z-index: 0;
border-bottom:1px solid black;
}
.box3{
left:500px;
top:-60px;
background-color:#ff69fa;
z-index:1;
}
.box4{
left:430px;
top:-230px;
background-color:#24ff00;
z-index:2;
}
WORKING DEMO :BEFORE :AFTER FLEXIBLE
I'm not sure you can do that with normal way, a little hack may be help.
What i do is to add another box right under .box1 with z-index above of all, and with size 50% of the parent.
HTML:
<div class="box1">
<div class="box1-fake"></div>
</div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
CSS:
.box1-fake{
background-color:#00d8ff;
position:absolute;
left: -1px;
top: -1px;
z-index: 1000;
width: 50%;
border-right: 0 none;
}
You could use clip on a pseudo element after the first box to get this working:
.box1:after {
content: "";
border:solid 1px;
background: #00d8ff;
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
top: -1px;
left: -1px;
clip: rect(76px 32px 102px -1px);
}
FIDDLE
For more information about the css clip property see this mozilla page
It also has cross browser support
Split the left box in two sections, upper and lower section, and assign z-indexes accordingly.
How about somethign like this:
<div class="box2">
<div class="box-top"></div>
<div class="box-bot"></div>
</div>
## css ##
.box2 {
position: relative;
left: 570px;
top: -30px;
border: none;
}
.box-top {
z-index: 200;
position: relative;
border-bottom: none;
height: 50%;
background-color: #f6ff00;
}
.box-bot{
z-index: 200;
/* position: relative; */
left: 570px;
border-top: none;
height: 50%;
background-color: #f6ff00;
}
http://jsfiddle.net/a8fXP/30/