Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
How to create the 3 vertical lines as in the following image using CSS?
This is pretty easy to create with linear-gradient background images and we don't need more than one div element to create this with gradients. All we need is a couple of gradient images.
Below is an explanation of how the shape was achieved:
One linear gradient image which is 85% the size of the container in the X-axis and 75% the size of the container in the Y-axis is used to create the large white portion and it is positioned on left of the container.
One more linear gradient image which is 15% of the size of the container in X-axis and 15% of the container's size in Y-axis is used to create the three stripes at the end. The stripes are created by splitting the gradient into colored and transparent portions. The colored portions are sized equally to produce a stripe like effect.
Note: The third bar in the image in question seems to be a little lower than the others, I am assuming this to be an error in the image. If it is not, it could still be achieved with the below approach.
body {
background: yellow;
}
.shape {
height: 100px;
width: 400px;
transform: skew(-30deg);
transform-origin: left bottom;
background-image: linear-gradient(to left, rgba(255,255,255,0.5) 25%, transparent 25%, transparent 33%, rgba(255,255,255,0.75) 33%, rgba(255,255,255,0.5) 60%, transparent 60%, transparent 66%, rgba(255,255,255,1) 66%, rgba(255,255,255,0.75) 93%, transparent 93%), linear-gradient(white, white);
background-size: 15% 100%, 85% 75%;
background-position: 100% 100%, 0% 0%;
background-repeat: no-repeat;
}
<div class='shape'></div>
You could also make use of SVG path elements to create this shape.
.shape {
position: relative;
height: 100px;
width: 300px;
}
.shape svg {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}
.shape svg path#white-bar {
fill: rgba(255, 255, 255, 1);
}
.shape svg path#translucent-bar-1 {
fill: rgba(255, 255, 255, 0.75);
}
.shape svg path#translucent-bar-2 {
fill: rgba(255, 255, 255, 0.5);
}
body {
background: yellow;
}
<div class='shape'>
<svg viewBox='0 0 300 100'>
<path d='M0,75 25,0 240,0, 221.5,75z M245,0 220,100 235,100 260,0' id='white-bar' />
<path d='M265,0 240,100 255,100 280,0' id='translucent-bar-1' />
<path d='M285,0 260,100 275,100 300,0' id='translucent-bar-2' />
</svg>
</div>
Note: It may well be possible to create this using a single path element and an angled gradient fill but I am not that good with SVG.
I did a fiddle.
trick is you need to transform the figure and use vertical-align property.
-webkit-transform: skew(20deg);
vertical-align: text-top;
Tweaking #Siddarth's code, this might be more suited to the above given image:
div{
display:inline-block;
vertical-align: text-top;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
background: white;
}
.one{
width: 450px;
height: 100px;
}
div:not(.one){
margin-left:0px;
width: 20px;
height: 200px;
}
.two{
opacity:.8;
}
.three{
opacity:.6;
}
.four{
opacity:.4;
}
body {
background-color: rgb(255, 210, 2);
}
<body>
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
<div class="four">
</div>
</body>
Related
I'm trying to achieve this gradient. What I don't understand is the curvature of it and I'm not sure on how to replicate it:
What I have so far:
and my code for the gradient:
radial-gradient(at top left,#629a92 36%,#02d2a0 67%, #fff 11%)
However I'm not sure how this gets stretched to the end of the screen. I haven't used radial-gradient much before so I feel like I'm missing something. Any help would be greatly appreciated. Thank you.
You need to also adjust background-size of the gradient:
body {
height:100vh;
margin:0;
background-image:radial-gradient(at top left,#629a92 36%,#02d2a0 67%, transparent 67.5%);
background-size:120% 100%;
background-repeat:no-repeat;
}
Or adjust the radius:
body {
height:100vh;
margin:0;
background-image:radial-gradient(120% 100% at top left,#629a92 61%,#02d2a0 92%, transparent 92.5%);
background-repeat:no-repeat;
}
UPDATE
If it's a linear-gradient inside a curved shape you can try to use multiple background. The idea is to create the linear-gradient and above it you add the a radial-gradient with transparent color to be able to see the first gradient.
body {
height:100vh;
margin:0;
background-image:
radial-gradient(120% 100% at top left,transparent 92%, #fff 92.5%),
linear-gradient(135deg, #51a595 0%, #3fcfa2 100%);
}
If you look carefully it is not a radial gradient. It is a linear gradient inside a radial shape. If I were you, I would do a SVG shape—mine is just for using as example—and apply it to the gradient.
Like this:
body {
margin: 0;
}
svg {
width: 0;
height: 0;
display: block;
}
.main {
width: 100%;
height: 100vh;
position: relative;
}
.main:before {
content: '';
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
background: #51a595;
background: linear-gradient(135deg, #51a595 0%, #3fcfa2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#51a595', endColorstr='#54bb9b',GradientType=1 );
-webkit-clip-path: url("#mask");
clip-path: url("#mask");
}
<svg>
<defs>
<clipPath id="mask">
<ellipse cx="0" cy="-1400" rx="2200" ry="1500"></ellipse>
</clipPath>
</defs>
</svg>
<div class="main"></div>
Looking at radial-gradient on mdn, it can take 2 percentages before the at top left for its size. We can make the first larger than 100% so it will extend beyond the screen on the x axis and put the second percent to 100% so it ends at the bottom.
radial-gradient(
200% 100% at top left,
#629a92 36%,
#02d2a0 67%,
#fff 11%
);
This should result in what you are looking for
.head {
width: 100%;
height: 200px;
background: radial-gradient(
200% 100% at top left,
#629a92 36%,
#02d2a0 67%,
#fff 11%
)
}
.body {
height: 200px;
width: 100%;
}
<div class="head"></div>
<div class="body"></div>
Let's say I have this clip path (a triangle generated here)
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
Is it possible to create a box-shadow from this clip path?
Something like this:
box-shadow: 20px 25px 50px -25px #000;
You can use a filter on the containing div, try:
.container {
filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.1))
}
eg: https://plnkr.co/edit/kePuv7OLQwawPjiBLg3J?p=preview
I'm assuming you mean, is it possible to create the shadow along the polygon. If so, then no. box-shadow is unfortunately only a "box", so it can't follow the clip path. It'd still apply to the rectangle of the element itself.
You could however pair it with another element that has the same clipping, but is set below it and offset and create a pseudo-shadow:
#box {
position: relative;
width: 200px;
height: 200px;
}
#content {
width: 100%;
height: 100%;
background: #3CF;
-webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%);
}
#shadow {
position: absolute;
z-index: -1;
content: "";
background: rgba(0, 0, 0, .5);
width: 200px;
height: 200px;
left: 5px;
top: 5px;
-webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%);
}
<div id="box">
<div id="content"></div>
<div id="shadow"></div>
</div>
Depending on your use-case, with some clever use of a background image, multiple borders, and/or gradients, you could make the background look between with a fading shadow and what not.
It's not possible, I think. I would suggest you this work around.
.triangle {
font-size:100px;
color:blue;
text-shadow:0 0 10px black;
}
<span class="triangle">▲</span>
I am trying to achieve a typical style in a div by splitting it into 2 halves and then creating a diagonal in between so it looks good. Screenshot below:
<div class="contact hidden-xs">
<div class="diagonal"></div>
</div>
.contact{
width: 100%;
height: 500px;
background: linear-gradient(to right, #f87f73 50%, #292423 50%)
}
.diagonal{
margin-left: 50%;
width: 0px;
border-width: 500px 200px 0px 0px;
border-style: solid;
border-color: #f87f73 transparent transparent transparent;
}
This is how I have done this. Now my problem is that since I have that diagonal there, it is making the red part bigger by that much. And it does not look good in smaller screens. How do use the linear gradient property so that it is not 50% 50%, instead it is something like 40% 60%, so that the diagonal doesn't make much difference. When I try 40% 60% in the gradient property it is mixing up the gradients which is only logical. How to make this work?
i think this code will make effect like your screen shot.
put this code in selector you want too look like the screen shot.
background-color: #f87f73;
background-image: -webkit-linear-gradient( -28deg, #f87f73 0%, #f87f73 60%, #292423 60%, #292423 60%);
background-image: linear-gradient( -28deg, #f87f73 0%, #f87f73 60%, #292423 60%, #292423 60%);
You can do that using border and flexbox
Snippet
.content {
width: 100%;
background-color: grey;
display: flex;
justify-content: flex-end
}
.diagonal {
border-bottom: 100px solid red;
border-left: 75px solid rgba(0, 0, 0, 0);
height: 0;
width: 30%;
}
<div class="content">
<div class="diagonal"></div>
</div>
Please notice you can change the width as you need.
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.
I have a shape with an edge like this in Photoshop:
Is it possible to make the repeated triangles as a border with CSS?
You can use gradients to create a zig-zag patterned background, use the ::after pseud-element to apply it like a border.
.header{
color: white;
background-color: #2B3A48;
text-align: center;
}
.header::after {
content: " ";
display: block;
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 36px;
background: linear-gradient(#2B3A48 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
background-repeat: repeat-x;
background-size: 0px 100%, 9px 27px, 9px 27px;
}
<div class="header"><h1>This is a header</h1></div>
Source: CSS Zigzag Border with a Textured Background
JSFiddle: http://jsfiddle.net/kA4zK/
For future viewers, I found this adaptation of #extramaster's answer to be a little simpler.
It's essentially the same, but it uses one fewer background gradients and allows the backing object (.navbar in my markup) to show through instead of hard-coding the second color into the zig-zag.
JsFiddle: http://jsfiddle.net/861gjx0b/2/
.header {
position: relative;
color: white;
background-color: #2B3A48;
text-align: center;
}
.navbar {
background: #272220;
height: 20px;
}
.header:after {
content: "";
position: absolute;
display: block;
height: 10px;
bottom: -10px;
/* -height */
left: 0;
right: 0;
/* TODO Add browser prefixes */
background: linear-gradient( 45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), linear-gradient( -45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%);
background-size: 8px 20px;
/* toothSize doubleHeight */
background-position: 0 -10px;
/* horizontalOffset -height */
}
<div class="header">
<h1>This is a header</h1>
</div>
<nav class="navbar"></nav>
Personally, I think clip-path is easier to work with/understand than complex background gradients.
body {
font-family:Roboto,'Open Sans',Helvetica,sans-serif;
}
.container {
background:#ddd;
margin:0 auto;
max-width:800px;
padding:30px;
}
h1:first-child {margin:0;}
.jagged-bottom {
position:relative;
}
.jagged-bottom:after {
background:#ddd;
content:"";
height:2vw;
position:absolute;
top:100%;
left:0;
right:0;
clip-path:polygon(
0 0, 2.5% 100%, 5% 0, 7.5% 100%,
10% 0,12.5% 100%,15% 0, 17.5% 100%,
20% 0,22.5% 100%,25% 0, 27.5% 100%,
30% 0,32.5% 100%,35% 0, 37.5% 100%,
40% 0,42.5% 100%,45% 0, 47.5% 100%,
50% 0,52.5% 100%,55% 0, 57.5% 100%,
60% 0,62.5% 100%,65% 0, 67.5% 100%,
70% 0,72.5% 100%,75% 0, 77.5% 100%,
80% 0,82.5% 100%,85% 0, 87.5% 100%,
90% 0,92.5% 100%,95% 0, 97.5% 100%, 100% 0);
}
<div class="container jagged-bottom">
<h1>Looks Like A Receipt</h1>
<p>Simply adjust the clip path on the pseudo-element if you want more or fewer spikes, and the height if you want them to be taller or shorter.</p>
</div>
There is a border-image property in CSS3.
Maybe you can work it out in a way you want. More here:
https://developer.mozilla.org/en-US/docs/Web/CSS/border-image
Or here
https://www.w3schools.com/cssref/css3_pr_border-image.asp
You can create an individual triangle using CSS quite easily (just tweak border properties). In order for this to work you will need to generate quite a bit of markup yourself. I would recommend against this approach.
Instead you are likely better off using an individual image containing a single triangle (preferably a transparent .png) and then use background-image and background-repeat (repeat-x) properties to bind that to a div (your "border").
Unfortunately there is no yet a straight-forward way to achieve this using pure CSS.