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>
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>
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>
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 want to make a div, with a triangle at the bottom.
But I need the background image on the triangle to appear, I've tried using a pseudo element (:after) but it doesn't work.
#homebg:after{
content:'';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 50px #fff;
border-left: solid 48vw transparent;
border-right: solid 48vw transparent;
}
I need to make the div appear like in this image with the background in the triangle :
Triangle over a plain color
If the triangle is displayed over a plain color, you can use this approach with an absolutely positioned pseudo element :
div{
position:relative;
background:url('http://i.imgur.com/W27LCzB.jpg');
background-size:cover;
min-height:100px;
padding-bottom:100px;
overflow:hidden;
}
div:after{
content:'';
position:absolute;
bottom:0; left:0;
border-left:50vw solid #fff;
border-right:50vw solid #fff;
border-top:100px solid transparent;
}
<div></div>
The left and right parts of the triangle are hidden by the left and right borders of the pseudo element. That is why this approach won't work over a gradient or image.
Triangle over an image or gradient
In these cases, you can use an inline svg with clipPath and a polygon element :
body, html{
height:100%;
background:url('https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg')no-repeat center center;
background-size:cover;
}
svg{
display:block;
width:100%;
}
<svg viewbox="0 0 100 40">
<clipPath id="clip">
<polygon points="0 0 100 0 100 25 50 40 0 25" />
</clipPath>
<image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" width="100" height="65" clip-path="url(#clip)"/>
</svg>
There are other possible approaches for the same result. You can find some here : CSS Transparent arrow/triangle
You can use a clipping mask
div {
-webkit-clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);
clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);
}
Have a look at this website to generate your own masks.
We can do this with only linear-gradient and mask. You can adjust the height you want.
div {
--triangle-height: 100px; /* you can change this */
--mask: linear-gradient(#000, #000) 0 0/100% calc(100% - var(--triangle-height)) no-repeat,
linear-gradient(to top right, transparent 49.5%, #000 50% 100%) 0 100%/50% var(--triangle-height) no-repeat,
linear-gradient(to top left, transparent 49.5%, #000 50% 100%) 100% 100%/50% var(--triangle-height) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
width: 500px;
height: 400px;
background: url(https://i.picsum.photos/id/1043/5184/3456.jpg?hmac=wsz2e0aFKEI0ij7mauIr2nFz2pzC8xNlgDHWHYi9qbc) 50% 50%/cover;
background-repeat: no-repeat;
}
<div></div>
By changing the variable and adjusting width: 100%
div {
--triangle-height: 200px; /* you can change this */
--mask: linear-gradient(#000, #000) 0 0/100% calc(100% - var(--triangle-height)) no-repeat,
linear-gradient(to top right, transparent 49.5%, #000 50% 100%) 0 100%/50% var(--triangle-height) no-repeat,
linear-gradient(to top left, transparent 49.5%, #000 50% 100%) 100% 100%/50% var(--triangle-height) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
width: 100%;
height: 400px;
background: url(https://i.picsum.photos/id/1043/5184/3456.jpg?hmac=wsz2e0aFKEI0ij7mauIr2nFz2pzC8xNlgDHWHYi9qbc) 50% 50%/cover;
background-repeat: no-repeat;
}
<div></div>