I want to create a right triangle with a linear-gradient background color. Is it possible using CSS?
Below is my code for a right triangle with a single background color.
The same code is also available here https://codepen.io/anon/pen/BMqVbL?editors=1100
<style>
body {
position: relative;
height: 100vh;
width: 100vw;
background: lightgrey;
}
.wrapper {
width: 760px;
height: 35px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.triangle {
border-right-width: 760px;
border-bottom-width: 35px;
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 0;
border-bottom-style: solid;
border-right-style: solid;
border-bottom-color: red;
border-right-color: transparent;
}
</style>
<body>
<div class="wrapper">
<div class="triangle"><!-- ### --></div>
</div>
</body>
I need my triangle to have a linear-gradient background transforming orange into red from left to right. The surroundings of my triangle have to be transparent.
I'd suggest to use the clip-path property instead, so you can reduce and clean the markup and easily use a linear-gradient as the background
Codepen demo
.triangle {
display: block;
max-width: 760px;
height: 35px;
background: linear-gradient(to right, orange, red);
clip-path: polygon(0 0, 100% 100%, 0 100%)
}
<span class="triangle"></span>
As a side note, I've used max-width instead of width, just to show you how you could make it responsive.
I think you are looking for border-image property:
border-image: linear-gradient(to top right, orange, red 50%, transparent 51%, transparent); should work
Demo solution:
.triangle {
border-right-width: 760px;
border-bottom-width: 35px;
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 0;
border-bottom-style: solid;
border-right-style: solid;
border-bottom-color: red;
border-right-color: transparent;
border-image: linear-gradient(to right top, orange, red 50%, transparent 51%, transparent);
}
<div class="wrapper">
<div class="triangle"><!-- ### --></div>
</div>
You can also consider multiple background to create the triangle but without transparency. The trick is to have a triangle on the top of the gradient having the same color as the main background:
.triangle {
max-width: 300px;
height: 50px;
background:
linear-gradient(to top right,transparent 49%,#fff 50%),
linear-gradient(to right, blue, red);
}
<div class="triangle"></div>
Another idea with skew transformation and overflow where you will have transparency:
.triangle {
max-width: 300px;
height: 50px;
overflow:hidden;
}
.triangle:before {
content:"";
display:block;
height:100%;
width:100%;
background: linear-gradient(to right, blue, red);
transform-origin:left;
transform:skewY(10deg);
}
<div class="triangle"></div>
You have also the SVG solution:
svg {
width:300px;
}
<svg viewBox="0 0 300 100">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="blue" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<polygon points='0,0 300,100 0,100' fill="url(#grad)" />
</svg>
https://codepen.io/vaneetthakur/pen/jdepLx
I have created the right triangle gradient background-color.
Please check below Code -
<div class="gradient-block"></div>
.gradient-block{
width:200px;
height:180px;
-webkit-clip-path: polygon(0 0, 0% 100%, 100% 59%);
clip-path: polygon(0 0, 0% 100%, 100% 59%);
display:inline-block;
background: #8c3310; /* Old browsers */
background: -moz-linear-gradient(top, #8c3310 0%, #bf6e4e 100%);
background: -webkit-linear-gradient(top, #8c3310 0%,#bf6e4e 100%);
background: linear-gradient(to bottom, #8c3310 0%,#bf6e4e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c3310', endColorstr='#bf6e4e',GradientType=0 );
}
Related
Hi I have a problem adjusting my linear gradient border. It is looking like this :
I want it to be looking like this ^ .
Could anyone help please.
.bot-right {
position: relative;
height:400px;
}
.bot-right:before, .bot-right:after {
content: "";
position: absolute;
bottom: -3px;
right: -40px;
}
.bot-right:before {
top: -3px;
width: 3px;
background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#009ee3), to(transparent));
background-image: -webkit-linear-gradient(transparent, #009ee3);
background-image: -moz-linear-gradient(transparent, #009ee3);
background-image: -o-linear-gradient(transparent, #009ee3);
}
.bot-right:after {
left: -3px;
height: 3px;
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#009ee3), to(transparent));
background-image: -webkit-linear-gradient(right, #009ee3, transparent);
background-image: -moz-linear-gradient(right, #009ee3, transparent);
background-image: -o-linear-gradient(right, #009ee3, transparent);
}
<div class="bot-right "></div>
a simple border-image and can do it
.bot-right {
position: relative;
height:400px;
border:3px solid;
border-image: linear-gradient(90deg,transparent, #009ee3) 3;
}
<div class="bot-right "></div>
I am new to using the css property clip-path and have created a shape that almost fits the requirement I have.
I am looking to create the following shape however struggling to convert the squares I have to circles.
.ticket {
background-color: blue;
height: 100px;
width: 200px;
border-radius: 10px;
box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
clip-path: polygon(
0 0,
0% 42%,
5% 42%,
5% 58%,
0 58%,
0 100%,
100% 100%,
100% 58%,
95% 58%,
95% 42%,
100% 42%,
100% 0
);
}
<div class="ticket"></div>
Is this possible using this property? If not, how could I achieve this using a SVG instead? Is it also possible to add a drop shadow to this clipped mask? As you can see in the snippet the shadow doesn't really work.
If it's only a solid coloration, background can do it:
.ticket {
background:
radial-gradient(20px at right, #0000 97%,blue) right,
radial-gradient(20px at left , #0000 97%,blue) left;
background-size: 51% 100%;
background-repeat: no-repeat;
height: 100px;
width: 200px;
border-radius: 10px;
filter: drop-shadow(0 0.5rem 0.2rem rgb(0 0 0 / 50%));
}
<div class="ticket"></div>
It is possible to 'cut holes' using the mask-image property and radial-gradients.
This snippet uses your code but replacing the clip-path with circle radial-gradient masks. Obviously you can change the percentages depending on hole-size required.
body {
background: cyan;
}
.ticket {
background-color: blue;
height: 100px;
width: 200px;
border-radius: 10px;
box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
--mask1: radial-gradient(circle at 0 50%, transparent 0, transparent 5%, black 5%, black 90%, transparent 90%, transparent);
--mask2: radial-gradient(circle at 100% 50%, transparent 0, transparent 5%, black 5%, black 90%, transparent 90%, transparent);
/* webkit needed for Chrome */
-webkit-mask-image: var(--mask1), var(--mask2);
mask-image: var(--mask1), var(--mask2);
}
<div class="ticket"></div>
(body has been given a background just to prove that holes have been cut rather than white circles drawn which is what would have happened with pseudo elements).
The box shadow is more problematic as it gets masked (or clipped as in the question's code). Box-shadow on element with -webkit-mask-image has ideas on putting a shadow on a containing element which has the mask image(s) as background images(s) but putting a shadow into the holes is still a problem. Perhaps just putting a slightly bigger container with gradient gray/transparent backgrounds would do enough, with the 'holes' varying transparent grays rather than just transparent. Seems hacky though.
Here is my solution for both contained and outlined coupons with mask-image and radial-gradient .
In order to draw an outlined coupon, I use two backgrounds and masks, each of which is only a half part to avoid overlapping of radial-gradient.
.wrapper {
display: flex;
gap: 30px;
--coupon-side-radius: 6px;
--coupon-background-color: #c39f76;
--coupon-border-color: #c39f76;
--coupon-border-width: 1px;
}
.coupon {
width: 100px;
height: 100px;
border: var(--coupon-border-width, 1px) solid var(--coupon-border-color);
border-radius: 6px;
box-sizing: border-box;
background: radial-gradient(
circle at center left,
transparent 0px var(--coupon-side-radius),
var(--coupon-border-color) var(--coupon-side-radius)
calc(var(--coupon-side-radius) + var(--coupon-border-width, 0.5px)),
var(--coupon-background-color) calc(var(--coupon-side-radius) + var(--coupon-border-width) + 0.5px)
)
border-box,
radial-gradient(
circle at center right,
transparent 0px var(--coupon-side-radius),
var(--coupon-border-color) var(--coupon-side-radius)
calc(var(--coupon-side-radius) + var(--coupon-border-width, 0.5px)),
var(--coupon-background-color) calc(var(--coupon-side-radius) + var(--coupon-border-width, 0.5px) + 0.5px)
)
border-box;
background-size: 50% 100%, 50% 100%;
background-position: 0% 100%, 100% 100%;
background-repeat: no-repeat, no-repeat;
-webkit-mask-image: radial-gradient(
circle at center left,
transparent 0,
transparent var(--coupon-side-radius),
#000 calc(var(--coupon-side-radius) + 0.5px)
),
radial-gradient(
circle at center right,
transparent 0,
transparent var(--coupon-side-radius),
#000 calc(var(--coupon-side-radius) + 0.5px)
);
-webkit-mask-size: 50% 100%, 50% 100%;
-webkit-mask-position: 0% 100%, 100% 100%;
-webkit-mask-repeat: no-repeat, no-repeat;
}
.coupon1 {
--coupon-side-radius: 6px;
--coupon-background-color: #c39f76;
--coupon-border-color: #c39f76;
--coupon-border-width: 1px;
}
.coupon2 {
--coupon-side-radius: 6px;
--coupon-border-color: red;
--coupon-border-width: 1px;
--coupon-background-color: #c39f76;
}
.coupon3 {
--coupon-side-radius: 6px;
--coupon-background-color: transparent;
--coupon-border-color: red;
--coupon-border-width: 1px;
}
.coupon4 {
--coupon-side-radius: 6px;
--coupon-background-color: transparent;
--coupon-border-color: red;
--coupon-border-width: 2px;
}
.coupon5 {
--coupon-side-radius: 6px;
--coupon-background-color: transparent;
--coupon-border-color: red;
--coupon-border-width: 0.5px;
border: none !important;
position: relative;
}
.coupon5::before{
content: "";
position: absolute;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: left top;
border: 1px solid red;
border-radius: 16px;
opacity: 0.7;
}
.coupon-demo {
width: 100px;
height: 100px;
border: 2px solid red;
border-radius: 15px;
background: radial-gradient(
circle at center left,
transparent 0px 6px,
red 6px 8px,
#fff 9px
)
border-box,
radial-gradient(
circle at center right,
transparent 0px 6px,
red 6px 8px,
#c39f76 9px
)
border-box;
background-size: 51% 100%, 50% 100%;
background-position: 0% 100%, 100% 100%;
background-repeat: no-repeat, no-repeat;
-webkit-mask-image: radial-gradient(
circle at center left,
transparent 0,
transparent 6px,
red 7px
),
radial-gradient(
circle at center right,
transparent 0,
transparent 6px,
red 7px
);
-webkit-mask-size: 50% 100%, 50% 100%;
-webkit-mask-position: 0% 100%, 100% 100%;
-webkit-mask-repeat: no-repeat, no-repeat;
}
<div class="wrapper">
<div class="coupon coupon1">1. Contained</div>
<div class="coupon coupon2">2. Contained + Outlined</div>
<div class="coupon coupon3">3. Outlined</div>
<div class="coupon coupon4">4. Border 2px</div>
<div class="coupon coupon5">5. Border 0.5px </div>
<div class="coupon-demo">6. For debug purpose </div>
<div>
I am trying to create a specific shape with specific color to keep it as a background. I successfully created gradient color that I want but I am struggling with getting shape right.
Here is what I have done and what is am trying to achieve,
My Work :
Expectation :
Code :
.grad {
height: 400px;
width: 900px;
background: linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0);
}
<div class="grad"></div>
I am open to use any other method as long as it is only one 'div'. I don't want to use two different div which are causing many issues in responsive design. I tried using clip-path but that too did not help because of the nature of the design.
Any help would be appreciated.
Use multiple gradient then adjust dimension and position to obtain what you want:
.grad {
height: 100px;
width: 300px;
background:
linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0) 0 0/100% calc(100% - 10px) no-repeat,
linear-gradient(110deg, #62e6a5 52%, transparent 0) 0 100%/100% 100% no-repeat;
}
<div class="grad"></div>
Use pseudo-elements like :before and :after
.grad{
position: relative;
height:200px;
width:450px;
margin-bottom: 10px;
background: linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0);
}
.grad-new{
position: relative;
height:200px;
width:450px;
margin-bottom: 10px;
overflow: hidden;
background: linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0);
}
.grad-new:before{
content: '';
position: absolute;
width: 3%;
height: 10px;
bottom: 0;
right: 55.6%;
background: #62e6a5;
transform: skew(-20deg);
}
.grad-new:after{
content: '';
position: absolute;
width: 100%;
height: 10px;
bottom: 0;
left: 44.4%;
background: #fff;
transform: skew(-20deg);
}
<div class="grad"></div>
<div class="grad-new"></div>
I am creating trapezoid using following CSS:
.trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
background: linear-gradient(red, yellow);
}
<div class='trapezoid'></div>
The linear-gradient attribute is not working. I want the trapezoid as shadow i.e its color should eventually fade away. Can anyone please help me on this?
Or use a transform on a suitably sized element (or pseudo-element).
.trapezoid {
width: 100px;
height: 100px;
margin: auto;
transform: perspective(100px) rotateX(40deg);
background: linear-gradient(red, yellow);
}
<div class='trapezoid'></div>
You cannot apply gradient in this way as you are using border and your element has a height of 0 so background won't be visible.
Instead you can try to use multiple gradient to create the shape:
.trapezoid {
height: 100px;
width: 200px;
background:
linear-gradient(to bottom left,white 50%,transparent 52%) 100% 0/40px 100% no-repeat,
linear-gradient(to bottom right,white 50%,transparent 52%) 0 0/40px 100% no-repeat,
linear-gradient(red, yellow);
}
<div class='trapezoid'></div>
Or use clip-path:
.trapezoid {
height: 100px;
width: 200px;
background: linear-gradient(red, yellow);
-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}
<div class='trapezoid'></div>
Another method with skew and pseudo-element:
.trapezoid {
height: 100px;
width: 200px;
position: relative;
}
.trapezoid:before,
.trapezoid:after{
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 60%;
background: linear-gradient(red, yellow);
transform:skew(20deg);
transform-origin:bottom right;
}
.trapezoid:after {
left: 0;
transform:skew(-20deg);
transform-origin:bottom left;
}
<div class='trapezoid'></div>
How exactly would I do this?
https://jsfiddle.net/4f2646gx/2/
What I want to do is place the linear gradient lines over the image.
What it looks like now:
The end result should look like this:
<style>
#img1 {
position: absolute;
clip-path: circle(85px at center);
top: 54%;
left: 72%;
transform: translate(-50%, -50%);
}
#img2 {
position: absolute;
top: 54%;
left: 72%;
transform: translate(-50%, -50%);
}
</style>
<div style="width: 260px; height: 194px; cursor: pointer;background-color: #000000 ;background-image: linear-gradient( to right,transparent 0, transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px,transparent 260px ); border: 3px solid #0059dd;">
<div style="position:relative; width:180px; height:180px">
<img id="img1" width="170" height="113" src="https://i.imgur.com/BO6KOvw.jpg">
<img id="img2" width="180" height="180" src="https://i.imgur.com/4HJbzEq.png">
</div>
</div>
I'd put all of it in one container, use absolute positioning to layer the elements. Also your background-color style of the gradient element needs to be transparent, otherwise you've got a black box with lines over your image and you can't see it. In this example, you'll also notice that border is moved to the top level container.
#container {
background-color: black;
position:relative;
width:260px;
height:194px;
padding: 0;
border: 3px solid #0059dd;
}
#img1,#img2 {
user-select: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#img1 {
clip-path: circle(85px at center);
}
#grad {
position: absolute;
top: 0;
left: 0;
width: 260px;
height: 194px;
cursor: pointer;
background-color: transparent;
background-image: linear-gradient( to right,transparent 0, transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px,transparent 260px );
}
<div id="container">
<img id="img1" width="170" height="113" src="https://i.imgur.com/BO6KOvw.jpg">
<img id="img2" width="180" height="180" src="https://i.imgur.com/4HJbzEq.png">
<div id="grad"></div>
</div>
To avoid adding any unnecessary markup, you can add a pseudo-element to your container div. Forked JSBin.
<style>
#img1, #img2 {
position: absolute;
top: 54%;
left: 72%;
transform: translate(-50%, -50%);
}
#img1 {
clip-path: circle(85px at center);
}
.circle-gradient {
width: 260px;
height: 194px;
cursor: pointer;
background-color: #000000;
border: 3px solid #0059dd;
position: relative;
}
.circle-gradient:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
background-image: linear-gradient( to right,transparent 0, transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px,transparent 260px );
}
</style>
<div class="circle-gradient">
<div style="position:relative; width:180px; height:180px">
<img id="img1" width="170" height="113" src="https://i.imgur.com/BO6KOvw.jpg">
<img id="img2" width="180" height="180" src="https://i.imgur.com/4HJbzEq.png">
</div>
</div>
Because CSS FTW, you can use the background property to stack multiple images & gradients.
In this code snippet, background-size references each background applied : the last value (120px 120px) sets the size of the sky image.
The good news is that it is supported since IE9!
div{
background:
linear-gradient( to right,transparent 0, transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px,transparent 260px ),
url("https://i.imgur.com/4HJbzEq.png") no-repeat center,
url("https://i.imgur.com/BO6KOvw.jpg") no-repeat center;
background-size: auto, auto, 120px 120px;
width: 260px;
height: 194px;
border: 3px solid #0059dd;
background-color: black;
}
<div></div>