I am trying to have jagged edges made in css3 on a div that is on an image and I need it to have a transparent bg, by bg I meant where the jagged edges are
See the following fiddle: http://jsfiddle.net/ovb597yq/
<div style="background: linear-gradient(45deg, #ec173a 5px, transparent 0) 0 5px, linear-
gradient(135deg, #ec173a 5px, #fff 0) 0 5px;
background-color: #ec173a;
background-position: right top;
background-repeat: repeat-y;
background-size: 10px 10px;width:200px;height:200px;">test</div>
.
body{
background-image:url("http://upload.wikimedia.org/wikipedia/commons/1/10/20090529_Great_Wall_8185.jpg");
}
Where its white I am trying to make it transparent but its not currently happening
Any ideas?
You need to apply it on :after :pseudo-element and change #fff to transparent.
body {
background-image: url("http://upload.wikimedia.org/wikipedia/commons/1/10/20090529_Great_Wall_8185.jpg");
}
div {
position: relative;
background-color: #ec173a;
width: 200px;
height: 200px;
}
div:after {
content: '';
position: absolute;
background: linear-gradient(45deg, #ec173a 5px, transparent 0) 0 5px, linear-gradient(135deg, #ec173a 5px, transparent 0) 0 5px;
background-position: right top;
background-repeat: repeat-y;
background-size: 10px 10px;
width: 10px;
height: 100%;
right: -10px;
}
<div>test</div>
Related
In the mockup I have, the stripes have a gradient opacity effect from transparent to semi-transparent.
Currently, I have this:
How do I make it so that the white stripes have the transparency gradient?
Here is my current code.
body {
background: gray;
}
.bar {
height: 50px;
width: 100%;
background-image: linear-gradient(90deg, #FC0252 0%, #01Fdd9 100%);
border-radius: 100rem;
position: relative;
}
/** Stripes. */
.bar::before {
content: "";
position: absolute;
border-radius: 100rem;
height: 100%;
width: 100%;
background-size: 90px 100%;
background-image: linear-gradient(
120deg,
transparent,
transparent 40%,
white 40%,
white 60%,
transparent 60%
);
}
<div class="bar"></div>
You can add a mask layer on the pseudo-element:
body {
background: gray;
}
.bar {
height: 50px;
width: 100%;
background-image: linear-gradient(90deg, #FC0252 0%, #01Fdd9 100%);
border-radius: 100rem;
position: relative;
}
/** Stripes. */
.bar::before {
content: "";
position: absolute;
border-radius: 100rem;
height: 100%;
width: 100%;
background-size: 90px 100%;
background-image: linear-gradient( 120deg, transparent 40%, white 41% 60%, transparent 61%);
-webkit-mask:linear-gradient(white,transparent);
mask:linear-gradient(white,transparent);
}
<div class="bar"></div>
In case you need better browser support than masks provide, I'd do something with an additional container, but overall it's a funny looking progress bar, hope it's for a kids game or something.
body {
background: gray;
padding-top: 5rem;
}
.bar-container {
border-radius: 100rem;
overflow: hidden;
border: darkgray 2px solid;
box-shadow: 0 2px 8px rgba(0,0,0,.5);
background-image: linear-gradient(90deg, #FC0252 0%, #01Fdd9 100%);
}
.bar {
height: 50px;
width: 100%;
position: relative;
background-size: 90px 100%;
background-image: linear-gradient(
120deg,
transparent,
transparent 40%,
white 40%,
white 60%,
transparent 60%
);
}
.bar::before, .bar::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 50%;
}
.bar::before {
left: 0;
background: linear-gradient(45deg, rgba(252,2,82,1) 0%, rgba(0,0,0,0) 50%);
}
.bar::after {
right: 0;
background: linear-gradient(-45deg, rgba(1,253,217,1) 0%, rgba(0,0,0,0) 50%);
}
<div class="bar-container">
<div class="bar"></div>
</div>
This question already has answers here:
How can I move this zigzag border to the left side instead of the bottom?
(2 answers)
Closed 3 years ago.
I making a zigzag right border with shadow, i do some research and find out top zigzag border, how much deg i need to make it on right side ?
.zigzag {
position: relative;
width: 100%;
height: 200px;
-webkit-filter: drop-shadow(rgba(0, 0, 0, 0.8) 0px 1px 2px);
background: #ff7300;
}
.zigzag:before {
content: "";
display: block;
position: absolute;
top: -10px;
width: 100%;
height: 10px;
background:
linear-gradient(
45deg, transparent 33.333%,
#ff7300 33.333%, #ff7300 66.667%,
transparent 66.667%
),
linear-gradient(
-45deg, transparent 33.333%,
#ff7300 33.333%, #ff7300 66.667%,
transparent 66.667%
);
background-size: 20px 40px;
}
<div class="zigzag"></div>
https://jsfiddle.net/8m2kopqg/
You can try this one.
.zigzag {
height: 200px;
width: 100%;
background: linear-gradient(150deg, #ff7300 6px, transparent 0) 0 5px, linear-gradient(-330deg, #ff7300 5px, #fff 0) 0 5px;
background-color: #ff7300;
background-position: right bottom;
background-repeat: repeat-y;
background-size: 10px 10px;
}
<div class="zigzag"></div>
Hei i have this code in CSS:
.gradient-four {
height: 100px;
width: 100px;
margin: 5px auto;
border-radius: 50%;
float: left;
background-image: radial-gradient( circle closest-side, red, purple);
}
<div class="gradient-four"></div>
And it´s applied to a div. How can i repeat that div, without repeating the code over and over? I tried the background repeat but that would´t do the trick.Is it possible?
Thank you
To repeat a linear/radial-background you simply need de specify a size then you may adjust the background-repeat to choose how to repeat it:
.gradient-four {
height: 100px;
width: 100px;
margin: 5px auto;
border-radius: 50%;
float: left;
background-image: radial-gradient( circle closest-side, red, purple);
background-size:50px 50px;
}
<div class="gradient-four"></div>
<div class="gradient-four" style="background-repeat:repeat-x"></div>
<div class="gradient-four" style="background-repeat:repeat-y"></div>
And if you want to repeat the result of the whole div you have, you may adjust the gradient like this:
.gradient-four {
height: 500px;
width: 500px;
margin: 5px auto;
float: left;
background-image: radial-gradient( circle closest-side, red, purple 98%, transparent 100%);
background-size:100px 100px;
}
<div class="gradient-four"></div>
Use the repeating-radial-gradient function. It takes the same parameters as radial-gradient and functions the same, just repeating.
Use repeating-radial-gradient like so:
.gradient-four {
height: 100px;
width: 100%;
margin: 5px auto;
float: left;
background-image: -webkit-repeating-radial-gradient(center center, red, purple 49px, rgba(0,0,0,0) 50px, rgba(0,0,0,0) 100%);
background-image: -moz-repeating-radial-gradient(center center, red, purple 49px, rgba(0,0,0,0) 50px, rgba(0,0,0,0) 100%);
background-image: -ms-repeating-radial-gradient(center center, red, purple 49px, rgba(0,0,0,0) 50px, rgba(0,0,0,0) 100%);
background-image: repeating-radial-gradient(center center, red, purple 49px, rgba(0,0,0,0) 50px, rgba(0,0,0,0) 100%);
background-size: 100px 100px;
}
JSFiddle
I'm looking to make a bootstrap btn look a little differently with there being a 5 point at the bottom of its base. I know its possible to do shapes this way using the :before and :after tools and transform but I want to put text inside of them which is why I'm having so much trouble. Is it possible to deal directly with the btn class to make this effect happen?
You can use SkewY as shown in the demo below:
div {
height: 100px;
width: 500px;
display: inline-block;
border: 10px solid green;
border-bottom: none;
text-align: center;
line-height: 100px;
position: relative;
color: green;
font-size: 20px;
}
div:before,
div:after {
content: "";
border-bottom: 10px solid green;
position: absolute;
width: calc(50% + 10px);
height: 100%;
top: 0;
}
div:before {
transform: skewY(5deg);
left: -10px;
}
div:after {
transform: skewY(-5deg);
left: 50%;
}
<div>Request a Quote</div>
gradient can be a first chip approach ...
example in situation: http://codepen.io/gc-nomade/pen/wGEyvd
button {
color:green;
display:block;
width:50%;
margin:1em auto;
padding:1.5em 0 2.5em;
border:none;
background:linear-gradient(to left, green, green) top,
linear-gradient(to bottom, green,green) top left,
linear-gradient(to bottom, green,green) top right,
linear-gradient(to bottom left, transparent 45%, green 47%, green 51%, transparent 52%) bottom left,
linear-gradient(to bottom right, transparent 45%, green 47%, green 51%, transparent 52%) bottom right;
background-repeat:no-repeat;
background-size:100% 3px, 3px 70%, 3px 70%,50% 30%, 50% 30%;
}
<button>REQUEST A CODE</button>
How can I add a jagged edge on to the left side instead of having it position on the right side? I tried changing background position etc but with no luck, any ideas? thanks
body {
background-image: url("http://upload.wikimedia.org/wikipedia/commons/1/10/20090529_Great_Wall_8185.jpg");
}
div {
position: relative;
background-color: #ec173a;
width: 200px;
height: 200px;
}
div:after {
content: '';
position: absolute;
background: linear-gradient(45deg, #ec173a 5px, transparent 0) 0 5px, linear-gradient(135deg, #ec173a 5px, transparent 0) 0 5px;
background-position: right top;
background-repeat: repeat-y;
background-size: 10px 10px;
width: 10px;
height: 100%;
right: -10px;
}
<div>test</div>
body {
background-image: url("http://upload.wikimedia.org/wikipedia/commons/1/10/20090529_Great_Wall_8185.jpg");
}
div {
position: relative;
background-color: #ec173a;
width: 200px;
height: 200px;
}
div:after {
content: '';
position: absolute;
background: linear-gradient(-45deg, #ec173a 5px, transparent 0) 0 5px, linear-gradient(-135deg, #ec173a 5px, transparent 0) 0 5px;
background-position: left top;
background-repeat: repeat-y;
background-size: 10px 10px;
width: 10px;
height: 100%;
left: -10px;
}
<div>test</div>
Here's the few differences that I made:
https://www.diffchecker.com/fq7w3utq