The code is below.
gradient
there is a very small gap between two divs.but it should not have.
.gra {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background: linear-gradient(0deg, red 0%, blue 100%);
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
}
.right {
background: linear-gradient(270deg, red 0%, blue 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}
<div class='gra left'></div>
<div class='gra right'></div>
It's happening because of Antialiasing.
Use left:0; with the left class and left: -1px; with the right class to overlap Antialiasing
.gra {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background: linear-gradient(0deg, red 0%, blue 100%);
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
left:0;
}
.right {
background: linear-gradient(270deg, red 0%, blue 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
left: -1px;
}
<div class='gra left'></div>
<div class='gra right'></div>
You can change by:
clip-path: polygon(-1% 0%, 100% 0%, 100% 101%);
.gra {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background: linear-gradient(0deg, red 0%, blue 100%) ;
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
}
.right {
background: linear-gradient(270deg, red 0%, blue 101%);
clip-path: polygon(-1% 0%, 100% 0%, 100% 101%);
}
<div class='gra left'></div>
<div class='gra right'></div>
Or, another way:
.gra {
position: relative;
width: 200px;
height: 200px;
overflow:hidden;
}
.left {
background: linear-gradient(0deg, red 0%, blue 100%);
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
position:absolute;
bottom:0;
left:0;
width:201px;
height:201px;
}
.right {
background: linear-gradient(270deg, red 0%, blue 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
position:absolute;
top:0;
right:0;
width:201px;
height:201px;
}
<div class="gra">
<div class="left"></div>
<div class="right"></div>
</div>
Here is an idea without clip-path where you will have a better support, less of code and no gap issue
.container {
background: linear-gradient(to left, red 0%, blue 100%);
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
}
.container:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to top, red 0%, blue 100%);
transform-origin: bottom right;
transform: skewX(45deg);
}
<div class="container">
</div>
You can fix this by adding a half pixel to the 100% values.
Change:
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
To:
clip-path: polygon(0% 0%, 0% calc(100% + 0.5px), 100% calc(100% + 0.5px));
If you need to fix a gap on the top, you could change 0% to calc(0% - 0.5px).
Related
I want to outline (2px high) ONLY the top, shaped part of this polygon with the color blue. What is the most effective way to achieve this?
.graph {
clip-path:polygon(0 78%, 9% 67%, 32% 77%, 56% 60%, 69% 30%, 88% 40%, 100% 20%, 100% 100%,0 100%);
border:none;
height:200px;
width:100%;
background:red;
position:absolute;
bottom: 0;
}
<body>
<div class="graph"></div>
</body>
This might not be the best solution but worth a try.
.graph {
clip-path:polygon(0 78%, 9% 67%, 32% 77%, 56% 60%, 69% 30%, 88% 40%, 100% 20%, 100% 100%,0 100%);
border:none;
height:200px;
width:100%;
background:red;
position:absolute;
bottom: 0;
}
.graph::before {
content: "";
clip-path:polygon(0 78%, 9% 67%, 32% 77%, 56% 60%, 69% 30%, 88% 40%, 100% 20%, 100% 100%,0 100%);
border: none;
height: 200px;
width: 100%;
background: white;
position: absolute;
bottom: -5px;
}
body{
overflow-y:hidden;
}
<body>
<div class="graph"></div>
</body>
Add more points to create only the line. You can introduce a variable to control the thickness:
.graph {
--b: 5px; /* the thickness */
height: 200px;
bottom:0;
left:0;
right:0;
position: absolute;
background :red;
clip-path: polygon(0 78%, 9% 67%, 32% 77%, 56% 60%, 69% 30%, 88% 40%, 100% 20%,100% calc(20% + var(--b)),88% calc(40% + var(--b)),69% calc(30% + var(--b)),56% calc(60% + var(--b)),32% calc(77% + var(--b)),9% calc(67% + var(--b)),0 calc(78% + var(--b)))
}
body {
background: grey;
}
<div class="graph"></div>
I have 2 images of CSS Div Shape. I want to make my DIVs like in the image.
Any help would be great.
.imageOne {
clip-path: polygon(0 0, 100% 0%, 100% 11%, 0 0);
height: 100px;
background: blue;
}
.imageTwo {
clip-path: polygon(80% 30%, 100% 41%, 100% 41%, 0 40%, 0 40%);
height: 100px;
background: blue;
}
<div class="imageOne">
</div>
<div class="imageTwo">
</div>
You can adjust the like below:
.imageOne {
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 40%); /* adjust the 40% here */
height: 100px;
background:
linear-gradient(to bottom left,transparent 49%,#b3e1ff 50%)
bottom left/200% 60% /* adjust the 200% here, 60% = 100% - 40% (from the top) */
no-repeat
#e1f4ff;
}
.imageTwo {
/* here ----v v---- and here the same */
clip-path: polygon(100% 100%,100% 70%, 80% 0, 0 70%,0 100%);
/* adjust this to control the top ----^ */
height: 100px;
background: #e1f4ff;
}
<div class="imageOne">
</div>
<div class="imageTwo">
</div>
i'm struggling with clip-path property in order to create an abstract background and i don't want to use an image or svg file, i tried with that property but i can't achieve this result :
enter image description here
my basic code:
.bg{
height: 100vh;
margin: 0;
}
.shape-1{
-webkit-clip-path: polygon(0 0, 10% 45%, 100% 0);
clip-path: polygon(0 10%, 40% 36%, 100% 0);
background: #3e19c6;
height: 100%;
width: 100%;
position: absolute;
margin: 0;
z-index: -1;
}
.shape-2{
-webkit-clip-path: polygon(0 62%, 100% 21%, 100% 100%, 0% 100%);
clip-path: polygon(0 62%, 90% 21%, 100% 100%, 0% 85%);
background: #c61951;
height: 100%;
width: 100%;
position: absolute;
margin: 0;
z-index: -1;
}
<div class="bg">
<div class="shape-1"> </div>
<div class="shape-2"> </div>
</div>
You can achieve this considering multiple background and gradient and only one element. It will also be responsive:
body {
margin:0;
height:100vh;
background:
linear-gradient(to top left,transparent 49.5%, #3e19c6 50%) top/100% 30%,
linear-gradient(to bottom right,transparent 49.5%, #c61951 50%) 0 30%/100% 30%,
linear-gradient(#c61951,#c61951) bottom/100% 49.1%;
background-repeat:no-repeat;
}
Here is another idea with skew transformation and pseudo elements:
body {
margin:0;
height:100vh;
position:relative;
overflow:hidden;
}
body::before,
body::after {
content:"";
position:absolute;
left:0;
width:100%;
transform-origin:right;
transform:skewY(-8deg);
}
body::before {
bottom:100%;
height:100vh;
background:#3e19c6;
}
body::after {
bottom:0;
height:80%;
background:#c61951;
}
And here is the clip-path solution:
body {
margin:0;
height:100vh;
position:relative;
overflow:hidden;
}
body::before,
body::after {
content:"";
position:absolute;
left:0;
width:100%;
}
body::before {
top:0;
height:25%;
background:#3e19c6;
-webkit-clip-path:polygon(0 0,100% 0,0 100%);
clip-path:polygon(0 0,100% 0,0 100%);
}
body::after {
bottom:0;
height:75%;
background:#c61951;
-webkit-clip-path:polygon(0% 33.33%,100% 0,100% 100%,0 100%);
clip-path:polygon(0% 33.33%,100% 0,100% 100%,0 100%);
}
div {
width: 200px;
height: 200px;
border-radius:100%;
background: linear-gradient(45deg, blue, blue 100%), linear-gradient(135deg, green, green), linear-gradient(225deg, yellow, yellow) , linear-gradient(225deg, red, red);
background-size: 50% 50%;
background-position: 0% 0%, 0% 100%, 100% 0%, 100% 100%;
background-repeat: no-repeat;
}
<div></div>
I'm trying to build a circle with 8 colors, could you please help me to tweak the code above?
Use following css:
div {
background: linear-gradient(45deg, lightgreen 50%, blue 50%),
linear-gradient(-45deg, green 50%, darkgreen 50%),
linear-gradient(-45deg, #e5e500 50%, yellow 50%),
linear-gradient(45deg, tomato 50%, red 50%);
background-position: 0% 0%, 100% 0%, 0 100%, 100% 100%;
}
div {
width: 200px;
height: 200px;
border-radius:100%;
background: linear-gradient(45deg, lightgreen 50%, blue 50%),
linear-gradient(-45deg, green 50%, darkgreen 50%),
linear-gradient(-45deg, #e5e500 50%, yellow 50%),
linear-gradient(45deg, tomato 50%, red 50%);
background-size: 50% 50%;
background-position: 0% 0%, 100% 0%, 0 100%, 100% 100%;
background-repeat: no-repeat;
}
<div></div>
div {
width: 200px;
height: 200px;
border-radius:100%;
background: linear-gradient(45deg, yellow 0%, yellow 50%, blue 50%, blue 100%), linear-gradient(135deg, gray 0%, gray 50%, green 50%, green 100%), linear-gradient(-45deg, black 0%, black 50%, #b2dba1 50%, #b2dba1 100%) , linear-gradient(-135deg, red 0%, red 50%, orange 50%, orange 100%);
background-size: 50% 50%;
background-position: 0% 0%,0% 100%, 100% 0%, 100% 100%;
background-repeat: no-repeat;
}
<div></div>
Or with something like this.
Here you can add as many slices you want.
But its a little bit longer than the other solutions.
If you want to read more about this here is the right place.
.pie {
position: absolute;
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
clip: rect(0px, 50px, 100px, 0px);
}
.hold {
position: absolute;
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
clip: rect(0px, 100px, 100px, 50px);
}
#pieSlice1 .pie {
z-index:8;
background-color: #1b458b;
-webkit-transform:rotate(50deg);
-moz-transform:rotate(50deg);
-o-transform:rotate(50deg);
transform:rotate(50deg);
}
#pieSlice2 .pie {
z-index:7;
background-color: red;
-webkit-transform:rotate(100deg);
-moz-transform:rotate(100deg);
-o-transform:rotate(100deg);
transform:rotate(100deg);
}
<div id="pieSlice1" class="hold"><div class="pie"></div></div>
<div id="pieSlice2" class="hold"><div class="pie"></div></div>
I have some problems with the picture display. Below is my codeļ¼
.night-sky {
position: relative;
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background: -webkit-linear-gradient(top, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
}
.night-sky:before {
height: 100%;
width: 100%;
content: ' ';
position: absolute;
top: 0;
/* http://bg.siteorigin.com/ */
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/424395/night-sky-texture.png");
opacity: .1;
}
body {
height: 100%;
margin: 0;
background: #000;
}
<body>
<div class="night-sky">
<p>qerqwer</p>
<p>hahahh</p>
</div>
</body>
This is how it looks like now:
If I didn't add the paragraph between the class div class = "night-sky" , it just shows nothing. but if i just add the background-image in the body it will shows correctly. I don't know what's wrong.
Thanks.
Add height: 100% to html and that would solve the problem.
Some suggestions:
You can see that now there would be some margin at the top - this comes due to margin collapsing (you can read more about it in this SO thread). To remove this add a border to the night-sky
Finish it up with:
* {
box-sizing: border-box;
}
so that there is no scrollbar on the body - see why border-box is important in this SO thread
Cheers!
* {
box-sizing: border-box;
}
html{
height: 100%;
}
.night-sky {
position: relative;
height: 100%;
margin: 0;
border: 1px solid black;
background-repeat: no-repeat;
background-attachment: fixed;
background: -webkit-linear-gradient(top, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
}
.night-sky:before {
height: 100%;
width: 100%;
content: ' ';
position: absolute;
top: 0;
/* http://bg.siteorigin.com/ */
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/424395/night-sky-texture.png");
opacity: .1;
}
body {
height: 100%;
margin: 0;
background: #000;
}
<body>
<div class="night-sky">
<p>qerqwer</p>
<p>hahahh</p>
</div>
</body>
html, body { height: 100%; width: 100%; margin: 0;}
.night-sky {
position: relative;
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background: -webkit-linear-gradient(top, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
}
.night-sky:before {
width: 100%;
content: ' ';
position: absolute;
top: 0;
/* http://bg.siteorigin.com/ */
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/424395/night-sky-texture.png");
opacity: .1;
}
body {
height: 100%;
margin: 0;
background: #000;
}
<body>
<div class="night-sky">
<p>qerqwer</p>
<p>hahahh</p>
</div>
</body>
Try this:-
<div style="background-image:url(http://www.html.am/images/image-codes/milford_sound_t.jpg);width:220px;height:140px;">
</div>