How to make side beveled background using linear gradient?
html:
<div class="signpost">
<div class="column">
</div>
<div class="column bg-gray">
</div>
<div class="column">
</div>
</div>
css:
.signpost {display: table; width: 100%; height: 100vh; }
.signpost .column {display: table-cell; width: 33.33%; height: 100%; text-align: center;}
.bg-gray {background-image: linear-gradient(to left bottom, #ededed 0%, #ededed 100%, white 0%, white 0%);}
Example
Thank you for help!
Try this
.signpost {
width: 100wh;
height: 100vh;
background: linear-gradient(to bottom right, red 40%, transparent 44%) 0 0/50px 100% no-repeat,
linear-gradient(to top left, red 40%, transparent 44%) 100% 100%/70px 200% no-repeat,
#ededed;
}
<div class="signpost">
</div>
Can be made with multiple gradients:
linear-gradient(to bottom right, red 49%, transparent 51%) x-position y-position/x-size y-size
.box {
width: 300px;
height: 300px;
background: linear-gradient(to bottom right, red 49%, transparent 51%) 0 0/30px 100% no-repeat,
linear-gradient(to top left, red 49%, transparent 51%) 100% 100%/50px 200% no-repeat,
#ededed;
}
<div class="box">
</div>
An idea using one gradient:
.signpost {
display: table;
width: 100%;
height: 100vh;
}
.signpost .column {
display: table-cell;
width: 33.33%;
height: 100%;
}
.bg-gray {
background: linear-gradient(to bottom right,red 44%, #ededed 44.1% 55%, red 55.1%) center/100vw 1000vw;
}
body {
margin:0;
}
<div class="signpost">
<div class="column">
</div>
<div class="column bg-gray">
</div>
<div class="column">
</div>
</div>
Related
**see the image in snippet having color gradient on some angle. I am unable to make color gradient from top to buttom **
the child div should have background :linear-gradient(0deg, #FF6633 0%, #CC0066 100%), some inclined angle and color should be gradient from top to bottom.
any solution
for parent div background :linear-gradient(180deg, #F1F1F1 0%, #FFFFFF 100%); ,
for child div background :linear-gradient(0deg, #FF6633 0%, #CC0066 100%) and some
inclined angle
thanks.
.parent{
width: 100%;
height: 900px;
background: linear-gradient(180deg, #F1F1F1 0%, #FFFFFF 100%);
}
.child{
width:50%;
height: 900px;
float: right;
background: linear-gradient(75deg , transparent 50%, #FF6633 0%, #CC0066 100%);
}
<div class=parent>
<div class=child>
</div>
Default body tag will have margin. we can remove that. please check the below code
<!DOCTYPE html>
<html>
<head>
</head>
<style>
body{
padding: 0;
margin: 0;
}
.parent{
width: 100%;
height: 900px;
background: linear-gradient(180deg, #F1F1F1 0%, #FFFFFF 100%);
}
.child{
width:50%;
height: 900px;
float: right;
background: linear-gradient(75deg , transparent 50%, #FF6633 0%, #CC0066 100%);
}
</style>
<body>
<div class=parent>
<div class=child>
</div>
</body>
</html>
Hi i want effect like this on my div but only at the bottom:
What im doing right now is this:
.container {
width: 500px;
height: 150px;
background: #FDCA40;
}
.box {
width: 100%;
height: 100px;
background: #FE7448;
-webkit-mask: radial-gradient(circle 20px, transparent 97%, #fff 100%) top/50px 200%;
// not working:
// -webkit-mask: radial-gradient(circle 20px, #FE7448 97%, #FE7448 100%) top/50px 200%;
}
<div class="container">
<div class="box"></div>
</div>
Which property in mask allows me to give color to circle? Whole mask property is confusing to me.
You can do it like below:
.container {
width: 500px;
height: 150px;
background: #FDCA40;
}
.box {
height: 100px;
background: #FE7448;
-webkit-mask:
linear-gradient(#fff 0 0)
top/100% calc(100% - 20px) no-repeat,
radial-gradient(circle closest-side, #fff 97%,transparent 100%)
bottom/50px 40px space;
}
<div class="container">
<div class="box"></div>
</div>
Using CSS variables to easily manage it:
.container {
width: 500px;
height: 150px;
background: #FDCA40;
}
.box {
--r:20px; /* radius */
--d:10px; /* minimum distance between circles */
height: 100px;
background: #FE7448;
-webkit-mask:
linear-gradient(#fff 0 0)
top/100% calc(100% - var(--r)) no-repeat,
radial-gradient(circle closest-side, #fff 97%,transparent 100%)
bottom/calc(2*var(--r) + var(--d)) calc(2*var(--r)) space;
}
<div class="container">
<div class="box"></div>
</div>
<div class="container">
<div class="box" style="--r:30px;--d:0px;"></div>
</div>
I'm trying to put an triangle/arrow under the v-container with some gradient colour but I don't know how to "merge" the gradient.
If I create the arrow with CSS the gradient won't match.
Any ideas about how to achieve this?
Here is the code:
HTML:
<div id="app">
<v-container fluid pa-0 class="gradient white--text">
<v-layout row wrap text-xs-center>
<v-flex xs12>
<h1 class="display-1 my-5">Lorem Ipsum</h1>
</v-flex>
</v-layout>
</v-container>
<div class="bottom-arrow"></div>
</div>
CSS:
.gradient{
height: 300px;
background: rgb(0,105,173);
background: linear-gradient(45deg, rgba(0,105,173,1) 0%, rgba(34,84,132,1) 100%);
}
.bottom-arrow:after {
content:'';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: 50px solid rgb(0,105,173);
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
You can use css clip-path, but the browser support is not that great.
.gradient{
height: 300px;
background: rgb(0,105,173);
background: linear-gradient(45deg, rgba(0,105,173,1) 0%, rgba(34,84,132,1) 100%);
display: flex;
justify-content: space-around;
align-items: center;
/* Clip-path */
/* clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 30px), 60% calc(100% - 30px), 50% 100%, 40% calc(100% - 30px), 0% calc(100% - 30px));
padding-bottom: 30px; */
/* Fixed-width arrow */
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 30px), calc(50% + 40px) calc(100% - 30px), 50% 100%, calc(50% - 40px) calc(100% - 30px), 0% calc(100% - 30px));
}
<div id="app" class="gradient">
<h1 class="display-1 my-5">Lorem Ipsum</h1>
</div>
Here is another idea more supported than clip-path but without transparency.
.gradient{
height: 250px;
background:
/* 28.3px = cos(45deg) x 40px
225deg = 180deg + 45deg
*/
linear-gradient( 225deg, transparent 28.3px,#fff 29px) bottom left /50% 40px,
linear-gradient(-225deg, transparent 28.3px,#fff 29px) bottom right/50% 40px,
/*Your gradient*/
linear-gradient(to bottom right, red,yellow ,blue);
background-repeat:no-repeat;
}
<div id="app" class="gradient">
</div>
I'm making a website and I need to split the page in 3 or more "triangles" and center the info in them.
I have tried this:
https://codepen.io/anon/pen/YBZOoy
CSS:
* {
margin: 0;
padding: 0;
}
.clipboard{
-webkit-clip-path: polygon(80% 0, 100% 0, 100% 100%, 20% 100%);clip-path: polygon(80% 0, 100% 0, 100% 100%, 20% 100%);
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: #d3d0c9;
background-size: cover;
background-position: center center;
}
.clipboard1 {
-webkit-clip-path: polygon(0 0, 50% 50%, 20% 100%, 0 100%);
clip-path: polygon(0 0, 50% 50%, 20% 100%, 0 100%);
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: red;
background-size: cover;
background-position: center center;
}
HTML
<div class="clipboard">
</div>
<div class="clipboard1">
<div class="text">
<h1>testasdd</h1>
</div>
I would like to have info in each "triangle". The text should be formatting according to the shapes.
You can easily do this consider a background layer then place the text where you want:
body {
margin:0;
height:100vh;
background:
linear-gradient(to bottom left ,transparent 49.5%,red 50%),
linear-gradient(to bottom right,transparent 49.5%,#ccc 50%);
}
.first {
font-size:30px;
text-align:center;
}
.second,
.third{
display:inline-block;
width:50%;
text-align:center;
line-height:80vh;
font-size:30px;
}
<div class="first">
some text
</div>
<div class="second">
some text
</div><div class="third">
some text
</div>
You can also try like below:
body {
margin:0;
height:100vh;
background:
linear-gradient(to bottom left,transparent 49.5%,blue 50%) right bottom/50.1% 50.1%,
linear-gradient(to bottom right,transparent 49.5%,blue 50%) left bottom/50.1% 50.1%,
linear-gradient(to bottom left ,transparent 49.5%,red 50%),
linear-gradient(to bottom right,transparent 49.5%,#ccc 50%);
background-repeat:no-repeat;
}
.first,
.fourth{
font-size:30px;
text-align:center;
}
.second,
.third{
display:inline-block;
width:50%;
text-align:center;
line-height:80vh;
font-size:30px;
}
<div class="first">
some text
</div>
<div class="second">
some text
</div><div class="third">
some text
</div>
<div class="fourth">
some text
</div>
I'm trying to make 2 background, as follow the image. I'm trying to do with linear-gradient and border radius, but I'm getting only a 90ยบ border and don't know how to change the border.
here is the code
background-image: linear-gradient(left, #e3e3e3, #e3e3e3 30%, transparent 50%, transparent 100%), radial-gradient(circle at top left, #f00,#e3e3e3);
background-image: -webkit-linear-gradient(left, #e3e3e3, #e3e3e3 30%, transparent 30%, transparent 100%);
border-top-right-radius: 36px;
border-bottom-right-radius: 36px;
You can do it like this:
.box {
padding:20px;
display:inline-block;
font-size:30px;
background:
linear-gradient(blue,blue) left/100px 100% no-repeat,
radial-gradient(circle at left,blue 44%,transparent 45%) 100px 0/74px 74px no-repeat;
}
<div class="box">
Some content here
</div>
You can also introduce CSS variable for more control:
.box {
padding:20px;
display:inline-block;
font-size:30px;
background:
linear-gradient(blue,blue) left/var(--p,50px) 100% no-repeat,
radial-gradient(circle at left,blue 44%,transparent 45%) var(--p,50px) 0/74px 74px no-repeat;
}
<div class="box">
Some content here
</div>
<div class="box" style="--p:20px">
Some content here
</div>
<div class="box" style="--p:150px">
Some content here
</div>