Related
I want to be able to round out the 3 leftmost corners on this shape that I have created, any idea how that can be done?
div {
position: absolute;
z-index: 1;
width: 423px;
height: 90px;
background-color: #b0102d;
color: white;
right: 0;
margin-top: 10vw;
-webkit-clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}
<div></div>
use inset with round property :
inset(0% 45% 0% 45% round 10px)
An SVG filter can round any kind of clip-path. You simply need to apply it to a parent element. Adjust the stdDeviation to control the radius:
.box {
width: 423px;
height: 90px;
background-color: #b0102d;
color: white;
clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}
.parent {
filter: url('#goo');
overflow:hidden;
position: fixed;
right:-50px;
z-index: 1;
margin-top: 10vw;
}
<div class="parent">
<div class="box"></div>
</div>
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>
Related: https://stackoverflow.com/a/65485455/8620333
I've recently found success experimenting with approaches like this...
SVG
<svg width="0" height="0">
<defs>
<clipPath id="clipped">
<circle cx="var(--myRad)" cy="var(--myRad)" r="var(--myRad)"></circle>
<circle cx="var(--myRad)" cy="calc(var(--myHeight) - var(--myRad))" r="var(--myRad)"></circle>
<circle cx="calc(var(--myWidth) - var(--myRad))" cy="calc(var(--myHeight) - var(--myRad))" r="var(--myRad)"></circle>
<circle cx="calc(var(--myWidth) - var(--myRad))" cy="var(--myRad)" r="var(--myRad)"></circle>
<rect y="var(--myRad)" width="var(--myWidth)" height="calc(var(--myHeight) - (2 * var(--myRad)))"></rect>
<rect x="var(--myRad)" width="calc(var(--myWidth) - (2 * var(--myRad)))" height="var(--myHeight)"></rect>
</clipPath>
</defs>
</svg>
CSS
.clipped {
--myWidth: 100vw;
--myHeight: 10rem;
--myRad: 2rem;
clip-path: url(#clipped);
}
I found this useful as compared to using border-radius with overflow set to hidden, because this approach doesn't create a BFC or break things like sticky position and css perspective effects. Also, this allows you to "inset" the position of the svg paths to clip inside the element with a "corner-radius" if you want.
You can also mess around with the circle to get some different effects.
-webkit-clip-path: circle(60.0% at 50% 10%);
clip-path: circle(50.0% at 50% 50%);
Codepen
Too bad you can't combine the polygon and circle... or maybe you can and I haven't played around with it enough to figure it out. HTH
clip-path: inset(45% 0% 33% 10% round 10px)
I don't have a comment option yes, so I'm writing it as an answer..
you need to write as many points as possible to round the corner. Nothig else...
for, example a few more points to make lower part bit rounder:
-webkit-clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 25% 100%, 5% 70%,1% 60%, 0% 50%, 25% 0%);
oh, yes, or SVG as comment people here.. :)
You could use a child element and do a nested clip-path on that and the child's pseudo element. The parent will do a polygon clip on the shape first, then the pseudo will have an ellipse to round the borders. The clips will have a combined effect.
.parent, .parent div, .parent div:before {
width: 423px;
height: 90px;
position: absolute;
}
.parent {
right: 0;
background-image: linear-gradient(to right, transparent 210px, #b0102d 210px);
margin-top: 15vh;
}
.parent div {
clip-path: polygon(100% 0%, 100% 100%, 25% 100%, 0 50%, 25% 0);
}
.parent div:before {
content: "";
background-color: #b0102d;
clip-path: ellipse(200px 45px at 210px);
}
<div class="parent">
<div></div>
</div>
Here is the demo with some adaptations to illustrate what's going on:
.parent, .parent div, .parent div:before {
width: 423px;
height: 90px;
position: absolute;
}
.parent {
right: 0;
background-image: linear-gradient(to right, transparent 210px, yellow 210px);
margin-top: 15vh;
}
.parent div {
background-color: blue;
clip-path: polygon(90% 0%, 90% 100%, 25% 100%, 0 50%, 25% 0);
}
.parent div:before {
content: "";
background-color: #b0102d;
clip-path: ellipse(200px 45px at 210px);
}
<div class="parent">
<div></div>
</div>
The horizontal size and position of the ellipse can be used to get a different effect on the edges. Note that the background starting postion of the parent needs to be adjusted to the same value as the placement of the ellipse (last value in the clip-path) because it fills up whatever gets clipped off on the right side. This can be visualised by removing background-color: blue from .parent div in the second demo.
Here is an additional Codepen to to try it out.
sorry if it has been already asked but I can't find the solution on how to apply a gradient color to a png logo. Here is the website i'm starting to work on: julienbraida.com.
White Logo is on top left. Client wants apply a gradient color on top of the branding logo and change the gradient color according to pages (to match the theme of the page).
I only was able to apply a color using a filter. But it's not a gradient color and I would need help to do that please.
I've done this:
.mobile-header-bar .mobile-branding img {
filter: sepia(100%) hue-rotate(19deg) saturate(100%);
}
But no gradient ... Thanks in advance for your help!
Set your image as a background:
NOTE:
filters apply to foreground elements, typically images.
Gradients are backgrounds and are effectively "under" images.
so if you want to apply a linear-gradient to an img you have to overlay the <img> with another element with a greater z-index
div {
height: 100px;
width: 150px;
display: inline-block;
}
.bgImageOnly {
background: url('https://picsum.photos/id/1/200/300') no-repeat;
}
.bgImgFilter {
filter: sepia(100%) hue-rotate(19deg) saturate(100%);
background: url('https://picsum.photos/id/1/200/300') no-repeat;
}
.bgImgGradient {
background: linear-gradient(135deg, rgba(255, 121, 0, .5) 0%, rgba(250, 0, 255, .5) 54%, rgba(126, 0, 255, .5) 100%), url('https://picsum.photos/id/1/200/300') no-repeat;
;
}
div.logos{
width: 100%;
overflow:hidden;
}
div.logos img{
height: 80px;
width: 150px;
}
img{
padding: 20px 0px;
}
.yourFilterParameters{
filter: brightness(1) invert(0) drop-shadow(0 1px 1px rgba(41, 55, 90, .4));
}
.somethingMoreVisible {
filter: brightness(70%) invert(30%) drop-shadow(4px 2px 2px rgba(255, 0, 0, 0.75))
}
div.gradientOverlay{
height: 80px;
width: 150px;
position:relative;
z-index:0;
}
div.gradientOverlay::after{
content:"";
position:absolute;
top:20px;
left:0px;
z-index: 1000;
height: 80px;
width: 150px;
background-image: linear-gradient(135deg, rgba(255, 121, 0, .5) 0%, rgba(250, 0, 255, .5) 54%, rgba(126, 0, 255, .5) 100%);
}
<div class="bgImageOnly"></div>
<div class="bgImgFilter"></div>
<div class="bgImgGradient"></div>
<hr>
<div class="logos">
<img src="https://picsum.photos/id/1/200/300"
class="yourFilterParameters">
<img src="https://picsum.photos/id/1/200/300"
class="somethingMoreVisible">
<div class="gradientOverlay">
<img src="https://picsum.photos/id/1/200/300">
</div>
</div>
Kiwi bird SVG (c)Chris Coyer # CSS-Tricks.com: see Using SVG
.logo {
width: 122px;
height: 100px;
}
.kiwi {
fill: url(#lgrad);
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="612px" height="502.174px" viewBox="0 65.326 612 502.174" enable-background="new 0 65.326 612 502.174" xml:space="preserve"
class="logo">
<defs>
<linearGradient id="lgrad" x1="0%" x2="0%" y1="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255, 121, 0);stop-opacity:.5" />
<stop offset="50%" style="stop-color:rgb(250, 0, 255);stop-opacity:.5" />
<stop offset="100%" style="stop-color:rgb(126,0,155);stop-opacity:.5" />
</linearGradient>
</defs>
<ellipse class="ground" cx="283.5" cy="487.5" rx="259" ry="80"/>
<path class="kiwi" d="M210.333,65.331C104.367,66.105-12.349,150.637,1.056,276.449c4.303,40.393,18.533,63.704,52.171,79.03
c36.307,16.544,57.022,54.556,50.406,112.954c-9.935,4.88-17.405,11.031-19.132,20.015c7.531-0.17,14.943-0.312,22.59,4.341
c20.333,12.375,31.296,27.363,42.979,51.72c1.714,3.572,8.192,2.849,8.312-3.078c0.17-8.467-1.856-17.454-5.226-26.933
c-2.955-8.313,3.059-7.985,6.917-6.106c6.399,3.115,16.334,9.43,30.39,13.098c5.392,1.407,5.995-3.877,5.224-6.991
c-1.864-7.522-11.009-10.862-24.519-19.229c-4.82-2.984-0.927-9.736,5.168-8.351l20.234,2.415c3.359,0.763,4.555-6.114,0.882-7.875
c-14.198-6.804-28.897-10.098-53.864-7.799c-11.617-29.265-29.811-61.617-15.674-81.681c12.639-17.938,31.216-20.74,39.147,43.489
c-5.002,3.107-11.215,5.031-11.332,13.024c7.201-2.845,11.207-1.399,14.791,0c17.912,6.998,35.462,21.826,52.982,37.309
c3.739,3.303,8.413-1.718,6.991-6.034c-2.138-6.494-8.053-10.659-14.791-20.016c-3.239-4.495,5.03-7.045,10.886-6.876
c13.849,0.396,22.886,8.268,35.177,11.218c4.483,1.076,9.741-1.964,6.917-6.917c-3.472-6.085-13.015-9.124-19.18-13.413
c-4.357-3.029-3.025-7.132,2.697-6.602c3.905,0.361,8.478,2.271,13.908,1.767c9.946-0.925,7.717-7.169-0.883-9.566
c-19.036-5.304-39.891-6.311-61.665-5.225c-43.837-8.358-31.554-84.887,0-90.363c29.571-5.132,62.966-13.339,99.928-32.156
c32.668-5.429,64.835-12.446,92.939-33.85c48.106-14.469,111.903,16.113,204.241,149.695c3.926,5.681,15.819,9.94,9.524-6.351
c-15.893-41.125-68.176-93.328-92.13-132.085c-24.581-39.774-14.34-61.243-39.957-91.247
c-21.326-24.978-47.502-25.803-77.339-17.365c-23.461,6.634-39.234-7.117-52.98-31.273C318.42,87.525,265.838,64.927,210.333,65.331
z M445.731,203.01c6.12,0,11.112,4.919,11.112,11.038c0,6.119-4.994,11.111-11.112,11.111s-11.038-4.994-11.038-11.111
C434.693,207.929,439.613,203.01,445.731,203.01z"/>
</svg>
I have a problem with CSS3. I don't know how to make a diagonal round gradient border like that:
I found something like this:
.box {
width: 250px;
height: 250px;
margin: auto;
background: #eee;
border: 20px solid transparent;
-moz-border-image: -moz-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
-webkit-border-image: -webkit-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
border-image: linear-gradient(to bottom right, #3acfd5 0%, #3a4ed5 100%);
border-image-slice: 1;
}
<div class="box"></div>
But unfortunately this works only with squares.
Any help would be appreciated.
Conical gradient is a gradient which goes along the circular arc around a center. This is what we see in color wheels. As Paulie_D had noted, these are currently not possible with CSS but Lea Verou has developed a polyfill for it.
Having said that, what you are looking for doesn't seem to be a conical gradient, it is normal angled linear gradient but applied only to the borders.
This cannot be achieved through CSS border-image property because of how it is intended to work as per specs.
A box's backgrounds, but not its border-image, are clipped to the appropriate curve
If the center portion of the circle is a solid color then the approach mentioned in Vitorino's answer can be used. If it is not a solid color (that is, the page background is a gradient or an image which needs to show through) then it would not help. The following approaches can be used for that case.
Using Mask Image:
This approach uses a circular mask image to mask the inner portion of the circle. This makes it look as though only the border has the gradient applied to it. The drawback is that this feature is currently supported only in Webkit powered browsers.
.border-gradient-mask {
height: 200px;
width: 200px;
border-radius: 50%;
background-image: linear-gradient(to bottom left, #7B73A4 0%, #150E5E 100%);
-webkit-mask-image: radial-gradient(circle at center, transparent 57%, white 58%);
mask-image: radial-gradient(circle at center, transparent 57%, white 58%);
}
body {
background: radial-gradient(circle at center, sandybrown, chocolate);
}
<div class="border-gradient-mask"></div>
Using SVG Shape or Mask:
The other approach is to use SVG circle element to create the circle and then assign the gradient to the stroke property. The gradient also has a gradientTransform applied to it because that is the only way to produce angled linear gradients with SVG.
.border-gradient-svg {
position: relative;
height: 200px;
width: 200px;
border-radius: 50%;
}
.border-gradient-svg svg {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
.border-gradient-svg circle {
fill: transparent;
stroke: url(#grad);
stroke-width: 8;
}
body {
background: radial-gradient(circle at center, sandybrown, chocolate);
}
<div class="border-gradient-svg">
<svg viewBox="0 0 100 100">
<defs>
<linearGradient id="grad" gradientUnits="objectBoundingBox" gradientTransform="rotate(135 0.5 0.5)">
<stop offset="0%" stop-color="#7B73A4" />
<stop offset="100%" stop-color="#150E5E" />
</linearGradient>
</defs>
<circle r="46" cx="50" cy="50" />
</svg>
</div>
The same can be achieved by using SVG mask also. All that is needed is to create a mask with two circle elements, fill the larger circle with white, smaller circle with black and then apply the mask to our original circle element. The area occupied by smaller circle (with black fill) will be transparent.
.border-gradient-svg {
position: relative;
height: 200px;
width: 200px;
border-radius: 50%;
}
.border-gradient-svg svg {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
.border-gradient-svg .grad-border {
fill: url(#grad);
mask: url(#masker);
}
body {
background: radial-gradient(circle at center, sandybrown, chocolate);
}
<div class="border-gradient-svg">
<svg viewBox="0 0 100 100">
<defs>
<linearGradient id="grad" gradientUnits="objectBoundingBox" gradientTransform="rotate(135 0.5 0.5)">
<stop offset="0%" stop-color="#7B73A4" />
<stop offset="100%" stop-color="#150E5E" />
</linearGradient>
<mask id="masker" x="0" y="0" width="100" height="100">
<circle r="50" cx="50" cy="50" fill="#fff" />
<circle r="42" cx="50" cy="50" fill="#000" />
</mask>
</defs>
<circle r="50" cx="50" cy="50" class="grad-border"/>
</svg>
</div>
Using Clip Path:
Another approach to creating this would be to use a clip-path (with inline SVG) with clip-rule set to evenodd. Advantage of clip path solution over the others is that this will trigger hover effects only while hovering on filled area (and not the transparent area). The drawback is that IE doesn't support clip paths (even with SVG).
.border-gradient-clip {
height: 200px;
width: 200px;
border-radius: 50%;
background-image: linear-gradient(to bottom left, #7B73A4 0%, #150E5E 100%);
-webkit-clip-path: url(#clipper);
clip-path: url(#clipper);
}
body {
background: radial-gradient(circle at center, sandybrown, chocolate);
}
<svg width="0" height="0">
<defs>
<clipPath id="clipper" clipPathUnits="objectBoundingBox">
<path d="M0,0.5 a0.5,0.5 0 1,0 1,0 a0.5,0.5 0 1,0 -1,0z M0.08,0.5 a0.42,0.42 0 1,0 0.84,0 a0.42,0.42 0 1,0 -0.84,0z" clip-rule="evenodd" />
</clipPath>
</defs>
</svg>
<div class="border-gradient-clip"></div>
You can try something like this i have used a pseudo element with -ve z-index
Note: the background is not transparent as i have used a background-color for inner element
.box {
width: 250px;
height: 250px;
position: relative;
margin: auto;
margin: 30px;
border-radius: 50%;
background: #fff;
}
.box:after {
content: '';
position: absolute;
top: -15px;
bottom: -15px;
right: -15px;
left: -15px;
background-image: linear-gradient(to bottom left, #7B73A4 0%, #150E5E 100%);
z-index: -1;
border-radius: inherit;
}
<div class="box"></div>
I want to be able to round out the 3 leftmost corners on this shape that I have created, any idea how that can be done?
div {
position: absolute;
z-index: 1;
width: 423px;
height: 90px;
background-color: #b0102d;
color: white;
right: 0;
margin-top: 10vw;
-webkit-clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}
<div></div>
use inset with round property :
inset(0% 45% 0% 45% round 10px)
An SVG filter can round any kind of clip-path. You simply need to apply it to a parent element. Adjust the stdDeviation to control the radius:
.box {
width: 423px;
height: 90px;
background-color: #b0102d;
color: white;
clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}
.parent {
filter: url('#goo');
overflow:hidden;
position: fixed;
right:-50px;
z-index: 1;
margin-top: 10vw;
}
<div class="parent">
<div class="box"></div>
</div>
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>
Related: https://stackoverflow.com/a/65485455/8620333
I've recently found success experimenting with approaches like this...
SVG
<svg width="0" height="0">
<defs>
<clipPath id="clipped">
<circle cx="var(--myRad)" cy="var(--myRad)" r="var(--myRad)"></circle>
<circle cx="var(--myRad)" cy="calc(var(--myHeight) - var(--myRad))" r="var(--myRad)"></circle>
<circle cx="calc(var(--myWidth) - var(--myRad))" cy="calc(var(--myHeight) - var(--myRad))" r="var(--myRad)"></circle>
<circle cx="calc(var(--myWidth) - var(--myRad))" cy="var(--myRad)" r="var(--myRad)"></circle>
<rect y="var(--myRad)" width="var(--myWidth)" height="calc(var(--myHeight) - (2 * var(--myRad)))"></rect>
<rect x="var(--myRad)" width="calc(var(--myWidth) - (2 * var(--myRad)))" height="var(--myHeight)"></rect>
</clipPath>
</defs>
</svg>
CSS
.clipped {
--myWidth: 100vw;
--myHeight: 10rem;
--myRad: 2rem;
clip-path: url(#clipped);
}
I found this useful as compared to using border-radius with overflow set to hidden, because this approach doesn't create a BFC or break things like sticky position and css perspective effects. Also, this allows you to "inset" the position of the svg paths to clip inside the element with a "corner-radius" if you want.
You can also mess around with the circle to get some different effects.
-webkit-clip-path: circle(60.0% at 50% 10%);
clip-path: circle(50.0% at 50% 50%);
Codepen
Too bad you can't combine the polygon and circle... or maybe you can and I haven't played around with it enough to figure it out. HTH
clip-path: inset(45% 0% 33% 10% round 10px)
I don't have a comment option yes, so I'm writing it as an answer..
you need to write as many points as possible to round the corner. Nothig else...
for, example a few more points to make lower part bit rounder:
-webkit-clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 25% 100%, 5% 70%,1% 60%, 0% 50%, 25% 0%);
oh, yes, or SVG as comment people here.. :)
You could use a child element and do a nested clip-path on that and the child's pseudo element. The parent will do a polygon clip on the shape first, then the pseudo will have an ellipse to round the borders. The clips will have a combined effect.
.parent, .parent div, .parent div:before {
width: 423px;
height: 90px;
position: absolute;
}
.parent {
right: 0;
background-image: linear-gradient(to right, transparent 210px, #b0102d 210px);
margin-top: 15vh;
}
.parent div {
clip-path: polygon(100% 0%, 100% 100%, 25% 100%, 0 50%, 25% 0);
}
.parent div:before {
content: "";
background-color: #b0102d;
clip-path: ellipse(200px 45px at 210px);
}
<div class="parent">
<div></div>
</div>
Here is the demo with some adaptations to illustrate what's going on:
.parent, .parent div, .parent div:before {
width: 423px;
height: 90px;
position: absolute;
}
.parent {
right: 0;
background-image: linear-gradient(to right, transparent 210px, yellow 210px);
margin-top: 15vh;
}
.parent div {
background-color: blue;
clip-path: polygon(90% 0%, 90% 100%, 25% 100%, 0 50%, 25% 0);
}
.parent div:before {
content: "";
background-color: #b0102d;
clip-path: ellipse(200px 45px at 210px);
}
<div class="parent">
<div></div>
</div>
The horizontal size and position of the ellipse can be used to get a different effect on the edges. Note that the background starting postion of the parent needs to be adjusted to the same value as the placement of the ellipse (last value in the clip-path) because it fills up whatever gets clipped off on the right side. This can be visualised by removing background-color: blue from .parent div in the second demo.
Here is an additional Codepen to to try it out.
Please see the below image...
I would like to make this via CSS.
I'm using this separator now as an image ( jpg ) that is responsive inside my container. The problem is that I can't seem to match colors exactly or get the white crystal clear and sharp.
I think CSS would be best way to solve this problem.
The dimensions are 1170px x 100px
Using Bootstrap 3.2
<div class="container">
<div class="row">
<img class="img-responsive" src="img/separator.gif">
</div>
</div>
Solution 1 : with borders with vw units :
DEMO (credits to Harry for the demo)
.separator{
width:95vw;
margin:0 auto;
}
.separator:before, .separator:after{
content:'';
display:block;
}
.separator:before{
border-left: 95vw solid #DA7317;
border-bottom: 60px solid transparent;
border-right:0;
border-top:0;
}
.separator:after{
border-right: 95vw solid #000;
border-top: 50px solid transparent;
border-left:0;
border-bottom:0;
margin-top:-45px;
}
<div class="separator">
</div>
Solution 2: with transform rotate :
DEMO
.separator{
position:relative;
padding-bottom:5.5%;
overflow:hidden;
}
.separator:before, .separator:after{
content:'';
position:absolute;
-webkit-backface-visibility:hidden;
}
.separator:before{
background: #DA7317;
bottom:100%; left:-1%;
width:101%; height:200%;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.separator:after{
background: #000;
top:100%;
width:100%; height:100%;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotate(-2.5deg);
-ms-transform: rotate(-2.5deg);
transform: rotate(-2.5deg);
}
<div class="separator"></div>
Using SVG: Recommended
You could make use of SVG to create the shape. Since it is a separator (which implies, it is not going to contain any text within the shape), it is more like an image and SVG fits the case perfectly. SVG can auto-scale without having any impact to the actual shape and since it is vector based, it doesn't get pixelated on scaling either.
We can use either SVG path or polygons to create this shape. Below are the sample snippets.
/* Using SVG Path */
svg {
height: 100px;
width: 1170px;
}
path#top {
fill: rgb(218, 115, 23);
}
path#bottom {
fill: rgb(42, 42, 42);
}
<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
<path d='m 0,0 h 100 l -100,95z' id='top' />
<path d='m 0,100 h 100 l 0,-90z' id='bottom' />
</svg>
/* Using SVG Polygons */
svg {
height: 100px;
width: 1170px;
}
polygon#top {
fill: rgb(218, 115, 23);
}
polygon#bottom {
fill: rgb(42, 42, 42);
}
<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
<polygon points='0,0 100,0 0,95' id='top' />
<polygon points='0,100 100,100 100,10' id='bottom' />
</svg>
Using Gradients:
You could achieve the shape by using two linear-gradient for background and position them appropriately like in the below snippet. Linear gradients can scale without affecting the shape.
.separator {
height: 100px;
width: 1170px;
background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 49%, rgb(218, 115, 23) 50%),
linear-gradient(to top left, rgb(42, 42, 42) 49%, rgba(0, 0, 0, 0) 50%);
background-size: 100% 95%, 100% 90%;
background-position: 0% 0%, 0% 90%;
background-repeat: no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="separator"></div>
None of the approaches produce a perfectly smooth output for the white colored area in the middle. While SVG produces more smoother edges, gradients produce a very rough/coarse output.