I need to achieve this effect: (fucsia is transparent)
I want to use this snipped I've prepared to achieve it:
div {
width: 300px;
height: 100px;
background-image: url(http://lorempixel.com/300/100);
background-size: 0% 100%;
background-repeat: no-repeat;
background-position: center;
transition: background 2s ease;
}
div:hover {
background-size: 100% 100%;
}
CodePen: http://codepen.io/FezVrasta/pen/ByZqvK
I need to generate a CSS gradient that looks like this picture: (fucsia is transparent)
How can I do?
Just use a color stop as follows~:
div {
border:1px solid red;
width: 200px;
height: 100px ;
background-image: linear-gradient(to bottom,
transparent,
transparent 90%,
blue 90%,
blue)
}
<div></div>
Could you use something like this?
.this {
width: 300px;
height: 100px;
background: red;
position: relative;
}
.this div {
position: absolute;
height: 10px;
width: 0px;
margin: 0 auto;
background: blue;
bottom: 0;
left: 50%;
transition: all 0.8s;
}
.this:hover div {
width: 100%;
left: 0;
}
<div class="this">
<div></div>
</div>
If you want to create this type of design using gradients, you could use this generator which would let you define "a transparent" part to your background
Related
I am trying to get a little hover animation going by moving the background image on the x-axis. However, I can't seem to find how to capture the element:hover. Does anyone has an idea what is wrong? Is the selector below valid?
Thank you for your help
div.card:hover .cardbg {
}
.card {
border-radius:15px;
border:none;
height: 280px;
position: relative;
background: linear-gradient(to bottom right,#ffec99 0,#ffb549 100%);
z-index: -1;
font-family: 'Arial';
}
.cardbg {
width: 100%;
height: 100%;
background-image: url('images/atom-original.svg');
opacity: 0.2;
background-size: cover;
background-repeat: no-repeat;
background-position-x: 100px;
transition: .2s ease all;
position: absolute;
top: 0;
left: 0;
}
div.card:hover .cardbg {
background-position-x: 10px;
background-color: red;
}
<div class="card">
<div class="cardbg">
</div>
</div>
Try removing the z-index: -1 from the .card class. That worked for me.
I created a triangle like so using css:
.box {
width: 0;
height: 0;
border-style: solid;
border-width: 540px 964px 540px 0;
border-color: transparent #007bff transparent transparent;
}
But I am trying to make my triangle look like this:
My question is how do I make the top and bottom more edge to edge?
You could use :after pseudo element to create one square and then use rotate and translate transforms.
.element {
display: inline-block;
background: lightgreen;
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.two {
margin-left: 30px;
width: 300px;
height: 300px;
}
.element:after {
content: "";
position: absolute;
width: 120%;
height: 120%;
background: #30373F;
transform: rotate(45deg) translate(10%, -20%);
}
<div class="element"></div>
<div class="element two"></div>
You can easily do this with gradient:
.box {
width:200px;
height:200px;
background:
linear-gradient(red,red) right/30% 100%,
linear-gradient(to top left,red 49.8%,transparent 50%) top left/70% 50%,
linear-gradient(to bottom left,red 49.8%,transparent 50%) bottom left/70% 50%,
url(https://picsum.photos/600/600?image=1069) center/cover;
background-repeat:no-repeat;
}
<div class="box">
</div>
I want to cut left top corner of a box using CSS like this.
keep in mind that background is transparent.
Nearly the same solution as OriDrori's answer but more flexible (if you need fixed-width cutted corner).
This gradient will look the same regardless of .card width and height.
body {
background: purple;
}
.card {
width: 200px;
height: 200px;
background: linear-gradient(135deg, transparent 20px, white 20px);
}
<div class="card"></div>
You can use a simple linear gradient for that:
body {
background: purple;
}
.card {
width: 200px;
height: 200px;
background: linear-gradient(to bottom right, transparent 5%, white 5%);
}
<div class="card"></div>
You can use clip-path
https://developer.mozilla.org/en/docs/Web/CSS/clip-path
and use something like this:
div#test{
background:red;
width:200px;
height: 200px;
-webkit-clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%, 0 20%);
clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%, 0 20%);
}
<div id="test"></div>
With a pseudo and transform you can do that, and it has good browser support (from IE9)
body {
background: url(https://picsum.photos/400/300) center / cover;
}
div {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
div::before {
content: '';
position: absolute;
left: calc(50% + 25px); /* 25px is height/width of the cut */
top: calc(50% + 25px);
width: 141.5%;
height: 141.5%;
transform: translate(-50%,-50%) rotate(45deg);
background: #eee;
opacity: 0.8;
}
<div></div>
As pointed out, if you need it to scale on different aspect ratio's, use this
body {
background: url(https://picsum.photos/400/300) center / cover;
}
div {
position: relative;
width: 80vw;
height: 80vh;
overflow: hidden;
}
div::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 1000%;
height: 5000%;
transform: rotate(45deg) translate(25px,-50%); /* 25px for the cut height/width */
transform-origin: left top;
background: #eee;
opacity: 0.8;
}
<div></div>
The code below will create an arrow right below an <a> element:
JSFiddle
.btn {
position: relative;
display: inline-block;
width: 100px;
height: 50px;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
}
.btn:after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-width: 10px 50px 0 50px;
border-style: solid;
border-color: gray transparent transparent transparent;
}
Hello!
The problem is that we have to indicate the link width to get an arrow of a proper size because we cannot indicate the border width in pixels.
How to make a responsive triangle percent based?
You could use a skewed and rotated pseudo element to create a responsive triangle under the link :
DEMO (resize the result window to see how it reacts)
The triangle maintains it's aspect ratio with the padding-bottom property.
If you want the shape to adapt it's size according to it's content, you can remove the width on the .btn class
.btn {
position: relative;
display: inline-block;
height: 50px; width: 50%;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
padding-bottom: 15%;
background-clip: content-box;
overflow: hidden;
}
.btn:after {
content: "";
position: absolute;
top:50px; left: 0;
background-color: inherit;
padding-bottom: 50%;
width: 57.7%;
z-index: -1;
transform-origin: 0 0;
transform: rotate(-30deg) skewX(30deg);
}
/** FOR THE DEMO **/
body {
background: url('http://i.imgur.com/qi5FGET.jpg');
background-size: cover;
}
Hello!
For more info on responsive triangles and how to make them, you can have a look at
Triangles with transform rotate (simple and fancy responsive triangles)
Another solution to this would be to use a CSS clip-path to clip a triangle out of a coloured block. No IE support however, but could be used for internal tools etc.
DEMO
Written with SCSS for ease.
.outer {
background: orange;
width: 25%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1em;
p {
margin: 0;
text-align: center;
color: #fff;
}
&:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
padding-bottom: 10%;
background: orange;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
}
I found solution that works with any width/height. You can use two pseudo-elements with linear-gradient background, like this, (fiddle):
.btn {
position: relative;
display: inline-block;
width: 100px;
height: 50px;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
}
.btn:before {
content: "";
position: absolute;
top: 100%;
right: 0;
width: 50%;
height: 10px;
background: linear-gradient(to right bottom, gray 50%, transparent 50%)
}
.btn:after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 50%;
height: 10px;
background: linear-gradient(to left bottom, gray 50%, transparent 50%)
}
A modified version of the below code can help you to achieve this
HTML
<div class="triangle-down"></div>
CSS
.triangle-down {
width: 10%;
height: 0;
padding-left:10%;
padding-top: 10%;
overflow: hidden;
}
.triangle-down:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left:-500px;
margin-top:-500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-top: 500px solid #4679BD;
}
For further reading on responsive triangles: CSS triangles made responsive
(archived link)
I tried the other answers and found them to be either too complex and/or unwieldy to manipulate the shape of the triangle. I decided instead to create a simple triangle shape as an svg.
The triangle height can be set to an absolute value, or as a percentage of the rectangle so it can be responsive in both directions if necessary.
html, body{
height:100%;
width:100%;
}
.outer{
width:20%;
height:25%;
background:red;
position:relative;
}
.inner{
height:100%;
width:100%;
background-color:red;
}
.triangle-down{
height:25%;
width:100%;
position:relative;
}
.triangle-down svg{
height:100%;
width:100%;
position:absolute;
top:0;
}
svg .triangle-path{
fill:red;
}
<div class="outer">
<div class="inner"></div>
<div class="triangle-down">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 2 1">
<g>
<path class="triangle-path" d="M0,0 l2,0 l-1,1 z" />
</g>
</svg>
</div>
Tested FF, Chrome, IE, Edge, mob Safari and mob Chrome
Another option would be to use background liner gradients, and flex positioning to make sure that the triangle always scales to its parent container. No matter how wide or narrow you make that container, the triangle always scales with it. Here is the fiddle:
https://jsfiddle.net/29k4ngzr/
<div class="triangle-wrapper-100">
<div class="triangle-left"></div>
<div class="triangle-right"></div>
</div>
.triangle-wrapper-100 {
width: 100%;
height: 100px;
display:flex;
flex-direction: column;
flex-wrap: wrap;
}
.triangle-right {
right: 0px;
background: linear-gradient(to right bottom, #6940B5 50%, transparent 50%);
width: 50%;
height: 100px;
}
.triangle-left {
left: 0px;
background: linear-gradient(to right bottom, #6940B5 50%, transparent 50%);
width: 50%;
height: 100px;
transform: scaleX(-1);
}
I took #Probocop's answer and come up with the following:
<style>
.btn {
background-color: orange;
color: white;
margin-bottom: 50px;
padding: 15px;
position: relative;
text-align: center;
text-decoration: none;
}
.btn:after {
background-color: inherit;
clip-path: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CclipPath id="p" clipPathUnits="objectBoundingBox"%3E%3Cpolygon points="0 0, 1 0, 0.5 1" /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E#p'); /* fix for firefox (tested in version 52) */
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
content: '';
height: 50px;
left: 0;
position: absolute;
right: 0;
top: 100%;
}
</style>
Hello!
This works in Chrome and I've added a fix for Firefox. It doesn't work in Edge, however if you decrease the height of the down arrow then it doesn't look so bad.
Please note that if you are using bootstrap you will need to either change the name or override some of the styles it applies. If you decide to rename it then you also need to add the following to the .btn style:
box-sizing: content-box;
I'm trying to figure out if there's a way to do this with CSS: I have a container div with a border-radius of 50% (circular). Inside of that is a rectangular div with a height of 30% positioned at the bottom of the container, and I want to be able to mask that off so that anything outside of the container's rounded border radius doesn't show. How do I accomplish this? Attached is a screenshot of what's currently happening, and this is my code:
<div id="coupon_container">
<div id="meter_container">50c off</div>
</div>
#coupon_container {
position: fixed; right:0; top:0; z-index: 100; color: #fff; width:170px; height: 120px;
#meter_container {
position: absolute; width: 110px; height:110px; .round; background: #greenDk; border:5px solid #fff; left: 60px; overflow: hidden;
.meter_level { width: 100%; height:30%; position: absolute; bottom:0; text-align: center; font-size: 1.6em; background: #limeLt; }
}
}
I really like the gradient solution that bookcasey has posted. However, compatibility may be a drawback as IE9 doesn't support CSS gradients. So another solution would be this one:
demo
The idea is to use a top padding of 70% instead of absolute positioning.
HTML:
<div id="coupon_container">
<div id="meter_container">50c off</div>
</div>
CSS:
#coupon_container {
overflow: hidden;
width: 8em; height: 8em;
border-radius: 50%;
background: green;
}
#meter_container {
margin: 70% 0;
height: 30%;
text-align: center;
background: lime;
}
You can achieve the effect you want using CSS3 gradients:
#coupon_container {
width: 100px;
height: 100px;
border-radius: 100px;
background: -webkit-gradient(linear, 50% 0%, 50% 70, color-stop(100%, #fa8072), color-stop(100%, #ff0000));
background: -webkit-linear-gradient(top, #fa8072 70px, #ff0000 70px);
background: -moz-linear-gradient(top, #fa8072 70px, #ff0000 70px);
background: -o-linear-gradient(top, #fa8072 70px, #ff0000 70px);
background: linear-gradient(top, #fa8072 70px, #ff0000 70px);
position: relative;
}
#meter_container {
width: 100px;
text-align: center;
position: absolute;
bottom: 10px;
}
Demo
I could be totally missing something, but couldn't you just add "overflow: hidden;" to the round element, #coupon_container?