This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 1 year ago.
So, I was trying to add a border animation to my webpage but it was not working. After lot of testing, I discovered that a specific class wrapper was responsible for removing my animation and omitting it solves the problem?
But I am unable to understand the reason behind as it looks unsuspecting. By the way, I am new to HTMl, CSS.
.wrapper {
position: relative;
width: 100%;
max-width: 1366px;
margin: 0 auto;
background: #ffffff;
}
#box {
display: flex;
align-items: center;
justify-content: center;
width: 400px;
height: 200px;
color: white;
font-family: 'Raleway';
font-size: 2.5rem;
}
.gradient-border {
--borderWidth: 3px;
background: #1D1F20;
position: relative;
border-radius: var(--borderWidth);
}
.gradient-border:after {
content: '';
position: absolute;
top: calc(-2 * var(--borderWidth));
left: calc(-2 * var(--borderWidth));
height: calc(100% + var(--borderWidth) * 4);
width: calc(100% + var(--borderWidth) * 4);
background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
border-radius: calc(2 * var(--borderWidth));
z-index: -1;
animation: animatedgradient 3s ease alternate infinite;
background-size: 300% 300%;
}
#keyframes animatedgradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
<div class="wrapper">
<div class="gradient-border" id="box">This is my box</div>
</div>
The problem is because the wrapper is actually extending out to the right and is over the top of your border. If you set your wrapper background to 'red' you will see what is happening.
And because you have the z-index of the border set to -1, the wrapper is sitting on top of the border. Easiest fix is to just set the wrapper z-index to -2 so it's behind the border.
.wrapper {
position: relative;
width: 100%;
max-width: 1366px;
margin: 0 auto;
background: #ffffff;
z-index: -2;
}
#box {
display: flex;
align-items: center;
justify-content: center;
width: 400px;
height: 200px;
color: white;
font-family: 'Raleway';
font-size: 2.5rem;
}
.gradient-border {
--borderWidth: 3px;
background: #1D1F20;
position: relative;
border-radius: var(--borderWidth);
}
.gradient-border:after {
content: '';
position: absolute;
top: calc(-2 * var(--borderWidth));
left: calc(-2 * var(--borderWidth));
height: calc(100% + var(--borderWidth) * 4);
width: calc(100% + var(--borderWidth) * 4);
background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
border-radius: calc(2 * var(--borderWidth));
animation: animatedgradient 3s ease alternate infinite;
background-size: 300% 300%;
z-index: -2;
}
#keyframes animatedgradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
<div class="wrapper">
<div class="gradient-border" id="box">This is my box</div>
</div>
Related
Okay so I have been trying everything I can think of to get this div to stay where it is on any browser and I thought I would turn to you wonderful people to try to help me (I am sure its an easy fix that I have overlooked)
No matter what I do it seems to mess things up elsewhere.
I have tried to put all divs (and the body) into fixed position (and this seems to have worked to an extent)
I have also tried to make the whole page flex in the hope that if I allow flex to work then it will flex around the offending items.
I have literally spent 2 days bashing my head against a wall with this and I could really use another set of eyes on my code to show me where I am going wrong.
Thankyou so much for your responses
I have updated my code to now run without images and with colours instead. I have managed to sort some of the issues out I was having but now when I move the page from bottom up the blue door shrinks
#opening {
background-color: red;
min-width: 100%;
max-width: 100%;
max-height: 100%;
min-height: 100%;
margin-left: 0;
margin-right: 0;
background-attachment: fixed;
}
.wrap {
background-color: purple;
background-position: fixed;
min-height: 140px;
max-height: 140px;
max-width: 360px;
min-width: 360px;
color: #fff;
position: fixed;
margin: 20vh;
margin-left: 42%;
padding: 30% 2% 0% 0%;
}
div.left {
background-color: blue;
text-align: center;
max-width: 34vh;
max-height: 62vh;
min-width: 34vh;
min-height: 62vh;
/* background-image:url("door.png") ; */
background-position: fixed;
background-repeat: no-repeat;
margin-left: 42.1%;
margin-top: 12.5%;
animation-name: open-left;
animation-duration: 10s;
animation-easing-function: cubic-bezier(.06, .63, 0, 1);
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-delay: 10s;
position: fixed;
top: 0;
left: 0;
}
#-webkit-keyframes open-left {
from {
-webkit-transform: perspective(500) rotateY(0deg);
-webkit-transform-origin: 0% 20%;
}
to {
-webkit-transform: perspective(500) rotateY(89deg);
-webkit-transform-origin: 0% 20%;
}
}
button {
background-color: #000000;
max-width: 70%;
max-height: 20;
border: white;
border-style: double;
color: white;
text-align: center;
text-overflow: unset;
font-size: 20px;
margin-left: 1%;
}
<body id="opening">
<div class="wrap">
<span class="animated rubberBand infinite">
<div>
<div>
<button onclick="location.href = 'https://www.google.com';"class="button"> And the Gunslinger followed </button>
</div>
</div>
</span>
<div class="left">
</div>
</div>
</body>
this gives me an output of this on a full screen
Full size page, no shrink
and this is the output when I shrink the screen to the left
Div position moves
Is this what you are after?
html,
body {
display: flex;
background: #000 url('https://keiraj87.github.io/website/backg.png') top center no-repeat;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#door-wrap {
height: 295px;
width: 175px;
margin: 150px auto 0 auto;
perspective: 420px;
transform-style: preserve-3d;
}
#door {
height: 100%;
width: 100%;
background: url('https://keiraj87.github.io/website/door.png') top center no-repeat;
background-size: 175px;
animation: open-left 10s cubic-bezier(.06, .63, 0, 1) 0s 1 forwards;
margin-left: -88px;
}
#keyframes open-left {
from {
transform: rotateY(0deg) translateX(88px);
}
to {
transform: rotateY(-85deg) translateX(88px);
}
}
<div id="door-wrap">
<div id="door">
</div>
</div>
I'm trying to replicate the styling of this animation but I don't know how to "fill in" the background color of the intersection of these two shapes. In the animation, the intersection is conveniently stepwise and stops where the edge of the square intersections with the origin of the circle; I can imagine using a clipping-mask to fill in that quadrant of the circle. However, is it possible to do the same more dynamically? Can you fill in the background of two intersecting shapes (while still having a transparent background otherwhere)?
.shape-interconnected {
width: 400px;
height: 300px;
position: relative;
background-color: black;
color: white;
margin: 1rem;
border-radius: 4px;
}
.shape-interconnected > .square, .shape-interconnected > .circle {
width: 50px;
height: 50px;
position: absolute;
border: 5px solid white;
transform: translate(-50%, -50%);
}
.shape-interconnected > .square {
border-radius: 4px;
top: 45%;
left: 55%;
}
.shape-interconnected > .circle {
border-radius: 50%;
top: 55%;
left: 45%;
}
<div class="shape-interconnected">
<div class="square"></div>
<div class="circle"></div>
</div>
You can recreate the dribble using html with a little css pseudo and animation magic.
This example below works at any set css variable set size border defined in the root css vars.
:root {
--size: 250px;
--border: 5px;
}
The trick in my example is by using positioning as percentages, meaning the parent .shape-interconnected controlled by the css var size, dictates all the child and child pseudo element position.
There is a lot of css to explain here, I've added comments in css, see if this inspires you to get you where you need to go...
Here is a fiddle... https://jsfiddle.net/joshmoto/378Lcgp0/
/* our root css vars */
:root {
--size: 250px;
--border: 5px;
}
BODY {
background: black;
min-height: 100%;
}
/* reset our box sizing on psuedo elems */
*, ::after, ::before {
box-sizing: border-box;
}
/* our shape intersect container positioned center of window */
/* this can be positioned where ever you want */
.shape-interconnected {
background: black;
width: var(--size);
height: var(--size);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
animation: shape-interconnected 2s infinite;
}
/* animate height and width equally */
#keyframes shape-interconnected {
0% {
width: var(--size);
height: var(--size);
}
50% {
width: calc(var(--size) * 0.6);
height: calc(var(--size) * 0.6);
}
100% {
width: var(--size);
height: var(--size);
}
}
/* our square calculated at 40% of parent */
/* position and overflow hidden are key, hiding pseudo child elems */
.shape-interconnected > .square {
width: calc(var(--size) * 0.4);
height: calc(var(--size) * 0.4);
background: transparent;
position: absolute;
overflow: hidden;
right: 0;
top: 0;
}
/* our square before pseudo elem emulating inner white filled circle */
/* position absolute with animation keyframes */
.shape-interconnected > .square::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: #fff;
border-radius: 50%;
position: absolute;
animation: circle-interconnected 2s infinite;
}
/* start top/right 150% away, overflowing out of view */
/* 50% keyframe top/right 50% away, in view */
#keyframes circle-interconnected {
0% {
top: 150%;
right: 150%;
}
50% {
top: 50%;
right: 50%;
}
100% {
top: 150%;
right: 150%;
}
}
/* our square after pseudo elem emulating white border */
.shape-interconnected > .square::after {
content: "";
display: block;
width: 100%;
height: 100%;
background: transparent;
border: var(--border) solid white;
position: relative;
}
/* our circle calculated at 40% of parent */
.shape-interconnected > .circle {
width: calc(var(--size) * 0.4);
height: calc(var(--size) * 0.4);
position: absolute;
bottom: 0;
left: 0;
}
/* our circle after pseudo elem emulating white border */
.shape-interconnected > .circle::after {
content: "";
display: block;
width: 100%;
height: 100%;
background: transparent;
border: var(--border) solid white;
border-radius: 50%;
position: relative;
}
<div class="shape-interconnected">
<div class="square"></div>
<div class="circle"></div>
</div>
Here is another example using the same code above but with these css root var settings...
:root {
--size: 500px;
--border: 2px;
}
Live example below...
/* our root css vars */
:root {
--size: 500px;
--border: 2px;
}
BODY {
background: black;
min-height: 100%;
}
/* reset our box sizing on psuedo elems */
*, ::after, ::before {
box-sizing: border-box;
}
/* our shape intersect container positioned center of window */
/* this can be positioned where ever you want */
.shape-interconnected {
background: black;
width: var(--size);
height: var(--size);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
animation: shape-interconnected 2s infinite;
}
/* animate height and width equally */
#keyframes shape-interconnected {
0% {
width: var(--size);
height: var(--size);
}
50% {
width: calc(var(--size) * 0.6);
height: calc(var(--size) * 0.6);
}
100% {
width: var(--size);
height: var(--size);
}
}
/* our square calculated at 40% of parent */
/* position and overflow hidden are key, hiding pseudo child elems */
.shape-interconnected > .square {
width: calc(var(--size) * 0.4);
height: calc(var(--size) * 0.4);
background: transparent;
position: absolute;
overflow: hidden;
right: 0;
top: 0;
}
/* our square before pseudo elem emulating inner white filled circle */
/* position absolute with animation keyframes */
.shape-interconnected > .square::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: #fff;
border-radius: 50%;
position: absolute;
animation: circle-interconnected 2s infinite;
}
/* start top/right 150% away, overflowing out of view */
/* 50% keyframe top/right 50% away, in view */
#keyframes circle-interconnected {
0% {
top: 150%;
right: 150%;
}
50% {
top: 50%;
right: 50%;
}
100% {
top: 150%;
right: 150%;
}
}
/* our square after pseudo elem emulating white border */
.shape-interconnected > .square::after {
content: "";
display: block;
width: 100%;
height: 100%;
background: transparent;
border: var(--border) solid white;
position: relative;
}
/* our circle calculated at 40% of parent */
.shape-interconnected > .circle {
width: calc(var(--size) * 0.4);
height: calc(var(--size) * 0.4);
position: absolute;
bottom: 0;
left: 0;
}
/* our circle after pseudo elem emulating white border */
.shape-interconnected > .circle::after {
content: "";
display: block;
width: 100%;
height: 100%;
background: transparent;
border: var(--border) solid white;
border-radius: 50%;
position: relative;
}
<div class="shape-interconnected">
<div class="square"></div>
<div class="circle"></div>
</div>
You might add a white circle inside the square and position it to the same coords the transparent one has.
Set overflow: hidden to the square to hide the outside part of the white circle:
.shape-interconnected {
width: 400px;
height: 300px;
position: relative;
background-color: black;
color: white;
margin: 1rem;
border-radius: 4px;
--animation-props: 1s alternate linear infinite;
}
.shape-interconnected>.square,
.shape-interconnected>.square:before,
.shape-interconnected>.circle {
width: 50px;
height: 50px;
position: absolute;
border: 5px solid white;
transform: translate(-50%, -50%)
}
.shape-interconnected>.square {
top: 35%;
left: 65%;
border-radius: 4px;
overflow: hidden;
animation: for_square var(--animation-props);
}
.shape-interconnected>.circle {
top: 65%;
left: 35%;
border-radius: 50%;
animation: for_transparent_circle var(--animation-props);
}
.shape-interconnected>.square:before {
content: '';
border-radius: 50%;
background: #fff;
top: 230%;
left: -190%;
animation: for_white_circle var(--animation-props);
}
#keyframes for_square {
to {
top: 50%;
left: 55%;
}
}
#keyframes for_transparent_circle {
to {
top: 55%;
left: 50%;
}
}
#keyframes for_white_circle {
to {
top: 80%;
left: 10%;
}
}
<div class="shape-interconnected">
<div class="square"></div>
<div class="circle"></div>
</div>
I'm trying to modify an existing css and make the semi-circle with the #E9EEF2 color thinner and shorter in width, but without any luck. So far everything I did was breaking the shape.
This is what I have so far as HTML:
.content {
display: flex;
}
.mask {
position: relative;
overflow: hidden;
display: block;
width: 12.5em;
height: 6.25em;
margin: 1.25em;
}
.semi-circle {
position: relative;
display: block;
width: 12.5em;
height: 6.25em;
background: #A148F7;
border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
}
.semi-circle::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
z-index: 2;
display: block;
width: 8.75em;
height: 4.375em;
margin-left: -4.375em;
background: #E9EEF2;
border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
}
.semi-circle--mask {
position: absolute;
top: 0;
left: 0;
width: 12.5em;
height: 12.5em;
background: transparent;
transform: rotate(120deg) translate3d(0, 0, 0);
transform-origin: center center;
backface-visibility: hidden;
transition: all .3s ease-in-out;
}
.semi-circle--mask::before {
content: "";
position: absolute;
top: 0;
left: 0%;
z-index: 2;
display: block;
width: 12.625em;
height: 6.375em;
margin: -1px 0 0 -1px;
background: #DBDBDB;
border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
}
.gauge--1 .semi-circle {
background: #A148F7;
}
<section class="content">
<div class="box gauge--1">
<div class="mask">
<div class="semi-circle"></div>
<div class="semi-circle--mask"></div>
</div>
</div>
</section>
You can find it in jsfiddle as well.
I know that I'm missing a small, but an important piece here, so please, give me a push, since I really have no idea how to modify the CSS
in order to keep the current shape.
To make the ring thinner, you need to increase the size of the inner semicircle that hides part of the outer semicircle making it look like a ring. I.e. modify the width, height, and negative left margin of .semi-circle::before.
To make the whole thing smaller, you need to decrease the width and height of all .mask, .semi-circle, .semi-circle--mask, and .semi-circle--mask::before. And then of course change the smaller semicircle too as mentioned above to fit the new size and your desired thickness of the ring.
Note that all heights should be half of the width of the same element. And the left margin of the .semi-circle::before should be negative half of the width of the same element.
Example with an 8em-wide gauge and a slightly thinner ring:
.content {
display: flex;
}
.mask {
position: relative;
overflow: hidden;
display: block;
width: 8em;
height: 4em;
margin: 1em;
}
.semi-circle {
position: relative;
display: block;
width: 8em;
height: 4em;
background: #A148F7;
border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
}
.semi-circle::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
z-index: 2;
display: block;
width: 6em;
height: 3em;
margin-left: -3em;
background: #E9EEF2;
border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
}
.semi-circle--mask {
position: absolute;
top: 0;
left: 0;
width: 8em;
height: 8em;
background: transparent;
transform: rotate(120deg) translate3d(0, 0, 0);
transform-origin: center center;
backface-visibility: hidden;
transition: all .3s ease-in-out;
}
.semi-circle--mask::before {
content: "";
position: absolute;
top: 0;
left: 0%;
z-index: 2;
display: block;
width: 8em;
height: 4em;
margin: -1px 0 0 -1px;
background: #DBDBDB;
border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
}
.gauge--1 .semi-circle {
background: #A148F7;
}
<section class="content">
<div class="box gauge--1">
<div class="mask">
<div class="semi-circle"></div>
<div class="semi-circle--mask"></div>
</div>
</div>
</section>
By modifying
.semi-circle::before {
...
width: 8.75em;
height: 4.375em;
margin-left: -4.375em;
...
}
This block sets up the bright half disk in the middle, so if you make that bigger, the outer "gauges" get thinner.
you can make the semicircle thinner if you increase the size of the inner semicircle:
.semi-circle::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
z-index: 2;
display: block;
width: 10.75em;
height: 5.375em;
margin-left: -5.375em;
background: #E9EEF2;
border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
}
Hellow Guys,
I'm creating a loading animation with HTML and CSS. As I'm not really skilled in responsive front-end, I'm really struggling with making the text and the circle responsive.
What I really want is to attach the div with the background image and the text to the bar and make them responsive in order not to move and remain at the same position.
This is what I want to achieve:
Here's the code of what I have at the moment. I've tried attachment fixed and stuff like that, but the main problem is that the image keeps scaling when I use a max height/width and the text moves to the right depending on the width of the website.
Hope you can help me, thanks in advise.
body {
background: #111 url("");
background-size: 25vmin;
background-repeat: no-repeat;
background-position: center 40%;
height: 100vh;
margin: 0;
}
.logo {
background: url("https://openclipart.org/download/256338/whitecircle.svg");
background-size: 25vmin;
background-repeat: no-repeat;
position: absolute;
left: 28%;
bottom: 10vh;
height: 25vh;
width: 100px;
max-width: 150px;
}
h1 {
color: #fff;
position: absolute;
bottom: 20vh;
left: 35%;
}
.progress {
width: 400px;
max-width: 85vw;
height: 8px;
position: absolute;
bottom: 20vh;
left: 50%;
background: rgba(255, 255, 255, 0.5);
transform: translate(-50%, -50%);
overflow: hidden;
}
.progress:after {
content: '';
display: block;
width: 100%;
height: 8px;
background: #fff;
animation: load 5s linear;
}
#-moz-keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#-webkit-keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#-o-keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
<div class="logo"> </div>
<h1 class="title"> Loading </h1>
<div class="progress"> </div>
What I normally do to make an item responsive and many parts need to work closely together is, create a container which holds all items that are related. Then within the container I align item using % so they scale nicely. The main container (in my example called loader) I use width and height using the vh and vw units.
Here's one way you can solve this. I've also replaced the SVG with a circle made using css. This way you don't need to load the image. It will make your page less resource heavy. Let me know if you specifically want to use the SVG and I can update the example.
NOTE: I added a light border to the loader div so you can see how it resized when you resize the window. Remove it when you copy it to your page.
body {
height: 100vh;
margin: 0;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
.loader {
position: relative;
height: 30vh;
width: 50vw;
min-width: 200px;
min-height: 100px;
border: 1px solid #444; // added to see the responsiveness
}
.circle {
width: 55px;
height: 55px;
bottom: calc(40% - 27.5px);
left: -2px;
position: absolute;
border: 5px solid white;
border-radius: 50%;
}
h1 {
color: #fff;
position: absolute;
left: 75px;
bottom: 32%;
}
.progress {
position: absolute;
width: calc(100% - 60px);
height: 8px;
bottom: 40%;
left: 60px;
background: rgba(255, 255, 255, 0.5);
overflow: hidden;
}
.progress:after {
content: '';
display: block;
width: 100%;
height: 8px;
background: #fff;
animation: load 5s linear;
}
#-moz-keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#-webkit-keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#-o-keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
<div class="loader">
<!--<div class="logo"> </div>-->
<!--<img class="img-logo" src="https://openclipart.org/download/256338/whitecircle.svg">-->
<div class="circle"></div>
<h1 class="title">Loading</h1>
<div class="progress"></div>
</div>
I have to make a div using HTML and CSS only but not using any background image with more than 4 corners.
How can I do it?
You can use pseudo-element and some css shape tricks to achieve this.
.folder {
width: 190px;
height: 110px;
background: #888;
position: relative;
overflow: hidden;
}
.folder:after {
content: "";
width: 100px;
border: 15px solid transparent;
position: absolute;
right: -15px;
border-top-color: #fff;
top:0;
}
<div class="folder"></div>
There are two examples of code: with CSS ( + animation ) and SVG.
With animation
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
position: relative;
width: 100%;
height: 100%;
background-color: #2196f3;
}
.page {
height: 100%;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-moz-box-align: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
}
.folder {
background-color: #d3eafd;
position: relative;
width: 92px;
height: 64px;
display: block;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
.folder-tab {
position: absolute;
height: 10px;
left: 0;
bottom: 100%;
display: block;
width: 40%;
border-top-left-radius: 8px;
background-color: inherit;
}
.folder-tab:after {
content: '';
position: absolute;
display: block;
top: 0;
left: calc(100% - 10px);
border-bottom: 10px solid #d3eafd;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.folder-icn {
padding-top: 12px;
width: 100%;
height: 100%;
display: block;
}
.downloading {
width: 30px;
height: 32px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.custom-arrow {
width: 14px;
height: 14px;
position: absolute;
top: 0;
left: 50%;
margin-left: -7px;
background-color: #fff;
-webkit-animation-name: downloading;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
animation-name: downloading;
animation-duration: 1.5s;
animation-iteration-count: infinite;
}
.custom-arrow:after {
content: '';
position: absolute;
display: block;
top: 100%;
left: -9px;
border-top: 15px solid #fff;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
}
.bar {
width: 30px;
height: 4px;
background-color: #fff;
margin: 0 auto;
}
#-webkit-keyframes downloading {
0% {
top: 0;
opacity: 1;
}
50% {
top: 110%;
opacity: 0;
}
52% {
top: -110%;
opacity: 0;
}
100% {
top: 0;
opacity: 1;
}
}
#keyframes downloading {
0% {
top: 0;
opacity: 1;
}
50% {
top: 110%;
opacity: 0;
}
52% {
top: -110%;
opacity: 0;
}
100% {
top: 0;
opacity: 1;
}
}
<div class="page">
<div class="folder">
<span class="folder-tab"></span>
<div class="folder-icn">
<div class="downloading">
<span class="custom-arrow"></span>
</div>
<div class="bar"></div>
</div>
</div>
</div>
SVG
<!DOCTYPE html>
<html>
<body>
<svg height="32px" version="1.1" viewBox="0 0 32 32" width="32px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><desc/><defs/><g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1"><g fill="#157EFB" id="icon-94-folder"><path d="M17,11 L15,7 L4.00276013,7 C2.89666625,7 2,7.88967395 2,8.991155 L2,27.008845 C2,28.1085295 2.89971268,29 3.99328744,29 L29.0067126,29 C30.1075748,29 31,28.1073772 31,27.0049107 L31,12.9950893 C31,11.8932319 30.1029399,11 28.9941413,11 L17,11 Z" id="folder"/></g></g>
</svg>
</body>
</html>
Helpful links:
More about SVG ( W3C )
The Shapes of CSS ( CSS-Tricks )
div {
width: 280px;
height: 280px;
background: #1e90ff;
-webkit-clip-path: polygon(48% 13%, 100% 13%, 100% 60%, 100% 100%, 0 100%, 0 0, 29% 0);
clip-path: polygon(48% 13%, 100% 13%, 100% 60%, 100% 100%, 0 100%, 0 0, 29% 0);
}
/* Center the demo */
html, body { height: 100%; }
body {
display: flex;
justify-content: center;
align-items: center;
}
<div></div>
With only a single block level element, you may style a :before pseudo-element to create the slanted tab above the containing <div>.
div {
margin: 40px;
width: 150px;
height: 80px;
background: red;
position: relative;
padding: 10px;
color: #fff;
}
div:before {
content:"";
position: absolute;
left: 0;
top: -20px;
width: 70px;
height: 0;
border-bottom: 20px solid red;
border-right: 20px solid transparent;
}
<div>content</div>
N.b.: This should have a better support on older browsers (and IE) than using a clip-path solution.
Just another way of doing it using the "canvas" of HTML5:
<div>
<canvas id="cnv" height="200" width="400"></canvas>
<script>
var canvas = document.getElementById('cnv');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 0);
ctx.lineTo(130, 25);
ctx.lineTo(200, 25);
ctx.lineTo(200, 125);
ctx.lineTo(0, 125);
ctx.closePath();
ctx.fillStyle = "gray";
ctx.fill();
}
</script>
</div>
You can achieve this using single element and two gradients (one gradient for rectangle, another is for tab):
div {
width: 280px;
height: 200px;
background: linear-gradient(to bottom, transparent 31px, #656d78 31px),
linear-gradient(-135deg, transparent 32%, #656d78 32%);
}
<div></div>
Also this can be achieved via single gradient (for tab) using pseudoelement:
div {
width: 280px;
height: 169px;
background-color: #656d78;
margin-top: 39px;
position: relative;
}
div:after {
content: "";
position: absolute;
top: -31px;
left: 0;
width: 100%;
height: 31px;
background: linear-gradient(-135deg, transparent 50%, #656d78 50%);
}
<div></div>
If you can insert code, you could use a SVG graphic.
If not, you could draw the vector graphic css clip-path as the answer above.
There are some generators, here is one I've found
Another option is to use at least 3 divs, skew one using css transform in one of them and locating each one using relative os absolute positioning.
You can make polygon's div using CSS.
.myDiv {
-webkit-clip-path: polygon(48% 16%, 100% 16%, 100% 100%, 0% 100%, 0 0, 32% 0);
clip-path: polygon(48% 16%, 100% 16%, 100% 100%, 0% 100%, 0 0, 32% 0);
}
Or you can create any type of polygon shape (online) using this website
https://www.cssportal.com/css-clip-path-generator/