I want a design like this:
So in fact a left side with background-color, a right side with background-color (divs of course, easy).
But can I do a diagonal line with CSS?
You can achieve this shape with a skewed pseudo element :
DEMO
HTML :
<div>
<h1>Your title here</h1>
</div>
CSS :
div{
padding:0 10px 10px;
background:#E7E5DD;
}
h1{
margin:0;
display:inline-block;
position:relative;
z-index:1;
padding:10px 50px 10px;
overflow:hidden;
}
h1:before{
content:'';
width:100%; height:100%;
position:absolute;
top:0; left:0;
background:#fff;
z-index:-1;
-webkit-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
transform: skewX(-20deg);
-webkit-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;
}
If you want to have with with pure CSS - see
http://css-tricks.com/snippets/css/css-triangle/ and
http://apps.eky.hk/css-triangle-generator/
(You would need a white top-left triangle on the gray area)
width: 0;
height: 0;
border-style: solid;
border-width: 200px 200px 0 0;
border-color: #fff transparent transparent transparent;
Please note that some browsers will not use anti-aliasing when drawing the borders.
A simpler approach in this case would be to have images for background - one for the text with the diagonal line, another one for the grey area.
http://jsfiddle.net/nuxcbqqq/1/
<div class="crossed"></div>
.crossed {
width: 100px;
height: 100px;
background:
linear-gradient(to top left,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%),
linear-gradient(to top right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%);
}
Code from here draw diagonal lines in div background with CSS
Related
I am trying to do something like the picture below. I would like a div with 3 borders, but the outer 2 borders are truncated in the way displayed in the picture. I am wondering if it is possible to get this effect with a pure CSS solution:
Here is a one element easy solution:
.box {
width:200px;
height:150px;
margin:80px;
border:10px solid red;
position:relative;
}
.box:before,
.box:after {
content:"";
position:absolute;
inset:-30px;
border:10px solid #0000;
border-image:linear-gradient(-45deg,blue 20%,#0000 0 80%,blue 0) 10;
}
.box:after {
inset:-50px;
border-image:linear-gradient(-45deg,green 20%,#0000 0 80%,green 0) 10;
}
<div class="box"></div>
Not sure if it is the simplest solution, but looks like I was able to do it with a background linear-gradient. Border colors help show the different components of the linear-gradient. Example here: https://jsfiddle.net/pn6a8rqj/171/
*{
--bw:15px;
}
.corners>div{
position:absolute;
}
.corners>div:nth-child(1),.corners>div:nth-child(2) {
position:absolute;
background:
/*top left*/
linear-gradient(to right, red var(--bw), transparent 0px) 0 0,
linear-gradient(135deg, blue calc(.7071*var(--bw)), transparent 0px) 0 var(--ch),
linear-gradient(to bottom, green var(--bw), transparent 0) 0 0,
linear-gradient(135deg, orange calc(.7071*var(--bw)), transparent 0px) var(--cw) 0,
/*bottom right*/
linear-gradient(to left, red var(--bw), transparent 0) 100% 100%,
linear-gradient(315deg, blue calc(.7071*var(--bw)), transparent 0px) 100% calc(100% - var(--ch)),
linear-gradient(to top, green var(--bw), transparent 0) 100% 100%,
linear-gradient(315deg, orange calc(.7071*var(--bw)), transparent 0px) calc(100% - var(--cw)) 100%;
background-repeat: no-repeat;
background-size: var(--cw) var(--ch);
}
.corners>div:nth-child(1){
top:0;
left:0;
--ch:var(--corner1Height);
--cw:var(--corner1Width);
width: calc(var(--width) + 8*var(--bw));
height: calc(var(--height) + 8*var(--bw));
}
.corners>div:nth-child(2){
top:calc(2*var(--bw));
left:calc(2*var(--bw));
--ch:var(--corner2Height);
--cw:var(--corner2Width);
width: calc(var(--width) + 4*var(--bw));
height: calc(var(--height) + 4*var(--bw));
}
.corners>div:nth-child(3){
box-sizing:border-box;
top:calc(4*var(--bw));
left:calc(4*var(--bw));
border: var(--bw) solid black;
width: var(--width);
height: var(--height);
}
#div1 {
--corner1Height:50px;
--corner1Width:100px;
--corner2Height:100px;
--corner2Width:200px;
--width:500px;
--height:300px;
width: var(--width);
height: var(--height);
}
Does anyone has a solution for this css gradient?
Gradient
This is the css I use now:
background: transparent radial-gradient(closest-side at 50% 50%, #202020 0%, #202020BC 18%, #82DB563C 100%, #83DC563B 100%) 0% 0% no-repeat padding-box;
border: 1px solid #83DC56;
opacity: 1;
You an use an ellipse at top to get this kind of effect. Here's an example I made for you. You of course can play around with the colors to get it to what you want.
div {
background: transparent radial-gradient(ellipse at top, #202020 40%, #006400 100%, #39FF14 100%);
border: 1px solid #83DC56; opacity: 1;
height: 100px;
width: 700px;
}
<div></div>
I am trying to take a screenshot of a page that has images overlayed by linear-gradient with the help of html2canvas. The height of the image varies but the width is fixed to 210px so, i need to use calc to calculate the positons of the gradient, which is not rendering in the way it looks on the screen.
Example with static values: https://jsfiddle.net/vpj3bz7s/1/
.linearGradient {
height: 200px;
width: 210px;
background-image: linear-gradient(to top left,
yellow 0%,
yellow 80px,
red 80px,
red 110px,
yellow 110px,
yellow 100%);
}
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
}
);
<div class="linearGradient"></div>
Example with calc values: https://jsfiddle.net/dk309pf6/2/
.linearGradient {
height: 200px;
width: 210px;
background-image: linear-gradient(to top left,
yellow 0%,
yellow calc(50% - 10px),
red calc(50% - 10px),
red calc(50% + 10px),
yellow calc(50% + 10px),
yellow 100%);
}
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
}
);
<div class="linearGradient"></div>
Edit:
Actual image overlayed on gradient looks like this:
The way it looks like in a screenshot is this:
The JS fiddle with my actual code is as follows (But the screenshot is a little different from my original one)
https://jsfiddle.net/nrfjh8m3/1/
Here is a different idea to obtain the same gradient. There is a ton of ways but the below is the only one that worked with html2canvas:
body {
margin: 0px;
}
.linearGradient {
height: 200px;
width: 210px;
background-color:red;
overflow:hidden;
position:relative;
}
.linearGradient::before,
.linearGradient::after {
content:"";
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background-repeat:no-repeat;
}
.linearGradient::before {
background:linear-gradient(to bottom right,yellow 49%, transparent 50%);
bottom:10px;
right:10px;
}
.linearGradient::after {
background:linear-gradient(to top left,yellow 49%, transparent 50%);
top:10px;
left:10px;
}
<div class="linearGradient"></div>
Working code with html2canvas:
https://jsfiddle.net/k79ybnup/1/
good afternoon everyone, due to the css room being empty i come here to ask you for support in relation to the css, i'm trying to make a water drop effect, but so far i haven't been able to do that ... will it be possible to show me the right way? I already tested SVG shape element and Clip Path (Mask) CSS, but I couldn't get the format ... the idea would be to apply this effect to an image ...
evry time i implemente the css the image rotates:
https://ibb.co/J3sVQyn
this is the code i'm using css and react call:
.CardComponent-media-4 {
width: 145px;
height: 169px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
flex-basis: 20%;
z-index: 50;
border-radius: 50%;
border-top: 145/2 ;
border-left: 145/2;
border-bottom: 145/2;
border-left: 145/2;
border-top-right-radius: 0;
transform: rotate(45deg);
}
<CardMedia image={imageUrl} title={title} className={classes.media} />
You are almost good, simply make the image rotate in the opposite direction by considering another element:
.box {
width:150px;
height:150px;
position:relative;
border-radius:50% 0 50% 50%;
margin:50px;
transform:rotate(-45deg);
overflow:hidden;
}
.box:before {
content:"";
position:absolute;
top:-20%;
left:-20%;
right:-20%;
bottom:-20%;
background: center/cover;
background-image:inherit;
transform:rotate(45deg);
}
<div class="box" style="background-image:url(https://i.picsum.photos/id/1074/800/800.jpg)"></div>
Another idea using mask:
img {
width: 175px;
height: 200px;
-webkit-mask:
linear-gradient(to bottom right,transparent 48%,#fff 50%) 17% 0% /40% 40%,
linear-gradient(to bottom left ,transparent 48%,#fff 50%) 83% 0%/40% 40%,
radial-gradient(circle farthest-side at 50% 31%,#fff 90%,transparent 91%) bottom/100% 60%;
-webkit-mask-repeat:no-repeat;
mask:
linear-gradient(to bottom right,transparent 48%,#fff 50%) 17% 0% /40% 40%,
linear-gradient(to bottom left ,transparent 48%,#fff 50%) 83% 0%/40% 40%,
radial-gradient(circle farthest-side at 50% 31%,#fff 90%,transparent 91%) bottom/100% 60%;
mask-repeat:no-repeat;
}
<img src="https://i.picsum.photos/id/1074/800/914.jpg" >
Happy new year!
Im trying to substitute this background picture with a css for scaling purposes.
Im having a problem with gradients logic.
the div properties:
.bg {
border: 1px solid white;
border-radius:10px;
padding:10px;
width:100%;
}
then im trying to color it
the background color is #065BDB
the 'bubble reflection' color is a gradient from rgba(87,144,231,1) to rgba(87,144,231,0) - same color with fading opacity.
to make the right shape of the 'bubble' i need to draw circle-square-circle with gradients, the circles draw ok, but the rectangle is problemetic
background:
radial-gradient(2em 2em at 3% 25%, rgba(87,144,231,1) 50%, transparent 50%),
linear-gradient(to bottom, transparent 3%, rgba(87,144,231,1) , transparent 97%),
radial-gradient(2em 2em at 97% 25%, rgba(87,144,231,1) 50%, transparent 50%);
im having multiple issues with this, cannot figure out how to draw a square from top to bottom with a margin on left and right, and how to add transparency from top to bottom to it, + adding a seconds background, maybe its better to make 2 divs instead of 1.
You can rely on a pseudo element and easily obtain the result:
.bg {
border: 1px solid white;
border-radius: 50px;
height:60px;
background: #065BDB;
position:relative;
z-index:0;
}
.bg::before {
content:"";
position:absolute;
z-index:-1;
top:5px;
left:15px;
right:15px;
height:30px;
border-radius:inherit;
background:linear-gradient(to bottom, rgba(87,144,231,1), rgba(87,144,231,0));
}
<div class="bg">
</div>
With multiple background you can try this:
.bg {
border: 1px solid white;
border-radius: 50px;
height:60px;
background:
radial-gradient(30px 30px at right,transparent 50%, #065BDB 52%) 0% 10px/35px 30px,
radial-gradient(30px 30px at left,transparent 50%, #065BDB 52%) 100% 10px/35px 30px,
linear-gradient(to bottom, rgba(87,144,231,1), rgba(87,144,231,0)) 0 10px/100% 30px,
#065BDB;
background-repeat:no-repeat;
box-sizing:border-box;
}
<div class="bg"></div>
We can add some CSS variable to control the shape:
.bg {
--h:30px; /*the height of the bubble*/
--d:35px; /*the distance from the sides*/
--t:10px; /*the distance from the top*/
margin:5px;
border-radius: 50px;
height:60px;
background:
radial-gradient(var(--h) var(--h) at right,transparent 50%, #065BDB 52%) 0% var(--t)/var(--d) var(--h),
radial-gradient(var(--h) var(--h) at left,transparent 50%, #065BDB 52%) 100% var(--t)/var(--d) var(--h),
linear-gradient(to bottom, rgba(87,144,231,1), rgba(87,144,231,0)) 0 var(--t)/100% var(--h),
#065BDB;
background-repeat:no-repeat;
box-sizing:border-box;
}
<div class="bg"></div>
<div class="bg" style="--h:20px;--d:50px;--t:20px"></div>
<div class="bg" style="--h:40px;--d:100px;--t:5px"></div>
try with ::before
.bg {
width:100%;
height:50px;
position:relative;
background:royalblue;
border-radius:20px;
}
.bg::before {
content:'';
width:97%;
height:25px;
background:linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.07));
position:absolute;
top:7px;
left:50%;
transform:translateX(-50%);
border-radius:20px;
}
<div class="bg"></div>