Corner separator CSS
Please see the image below ...
I would like to do this via CSS.
I am using this separator now as an image (jpg) that is responsive inside my container. The problem is I can't match colors exactly or get the white crystal clear and sharp.
I think CSS would be the best way to solve this problem.
Dimensions: 1170px x 100px
Using Bootstrap 3.2
<div class="container">
<div class="row">
<img class="img-responsive" src="img/separator.gif">
</div>
</div>
source to share
Solution 1: with borders with vw
units:
.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 a rotated transform:
.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>
source to share
Using SVG: Recommended
You can use SVG to create the shape. Since it is a delimiter (meaning it will not contain any text in the form), it looks more like an image and SVG is perfect for the case. SVG can auto-scale without affecting the actual shape in any way, and since it's vector-based it doesn't get pixelated when scaled.
To create this shape, we can use SVG path
or polygons
. Below are examples of 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 can achieve the shape by using two linear-gradient
for the background and positioning them appropriately like in the snippet below. Linear gradients can be scaled 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>
Neither approach gives a completely smooth exit for the white area in the middle. While SVG creates smoother edges, gradients create a very rough / coarse output.
source to share