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?
Related
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 am trying to achieve this effect in CSS:
This is my code:
#test {position: relative;margin: 100px;}
#test::after {
background-color: maroon;
box-shadow: 0 -50px 10px 7px gray;
height: 45px;
left: -15px;
position: absolute;
top: 40px;
transform: perspective(150px) rotateX(-45deg);
transform-origin: center bottom 0;
width: 60px;
content: "";
}
<div id="test"></div>
but I am not achieving the expected result with the cast shadow. I wonder if its even possible to do this with CSS only?
Fiddle Demo
Maybe something like this? I added another element representing the shadow:
#shadow {
height: 90px;
left: -15px;
position: absolute;
top: 30px;
background: rgba(0, 0, 0, 0);
width: 60px;
transform: perspective(50px) rotateX(25deg);
box-shadow: 0 -106px 20px 17px #808080;
}
https://jsfiddle.net/zcyy09mp/4/
As mentioned in my comment, I would generally recommend the approach used in my fiddle (which is, use another pseudo-element) or the one in Martin's answer (which is, to use an extra element) but as you've mentioned that the other pseudo-element is already used and you are trying to avoid any extra elements, the other approach is to use gradients as background for the parent element. By using the appropriate side-to-side gradients with background-position, background-size, we can not only get the shape but also an effect very similar to the blurred nature of the shadow.
Below is a sample snippet: (the output is also reasonably responsive as you can see by hovering it)
#test {
position: relative;
height: 100px;
width: 100px;
margin: 100px;
background: linear-gradient(to bottom right, transparent 45%, gray 55%), linear-gradient(to bottom left, transparent 45%, gray 55%), linear-gradient(to bottom, transparent, gray), linear-gradient(gray, gray);
background-repeat: no-repeat;
background-size: 30px 95%, 30px 95%, calc(100% - 60px) 8px, calc(100% - 60px) calc(100% - 8px);
background-position: 0% 100%, 100% 100%, 50% 4px, 50% 100%;
}
#test::after {
position: absolute;
content: "";
background-color: maroon;
width: 100%;
height: 45%;
left: 0px;
top: 100%;
transform: perspective(150px) rotateX(-45deg);
transform-origin: center top 0;
}
/* just for demo */
#test {
transition: all 1s;
}
#test:hover {
height: 200px;
width: 200px;
}
<div id="test"></div>
In the below snippet, I have given a different color for each of the gradient just to visually show how it is achieved.
#test {
position: relative;
height: 100px;
width: 100px;
margin: 100px;
background: linear-gradient(to bottom right, transparent 45%, red 55%), linear-gradient(to bottom left, transparent 45%, blue 55%), linear-gradient(to bottom, transparent, green), linear-gradient(rebeccapurple, rebeccapurple);
background-repeat: no-repeat;
background-size: 30px 95%, 30px 95%, calc(100% - 60px) 8px, calc(100% - 60px) calc(100% - 8px);
background-position: 0% 100%, 100% 100%, 50% 4px, 50% 100%;
}
#test::after {
position: absolute;
content: "";
background-color: maroon;
width: 100%;
height: 45%;
left: 0px;
top: 100%;
transform: perspective(150px) rotateX(-45deg);
transform-origin: center top 0;
}
/* just for demo */
#test {
transition: all 1s;
}
#test:hover {
height: 200px;
width: 200px;
}
<div id="test"></div>
According to the W3 spec, "the 'box-shadow' property attaches one or more drop-shadows to the box". The shadow you want to create is not a drop shadow so there is no CSS that would make the shadow in the picture.
The closest you could achieve is pushing the shadow off one edge by using a negative spread radius:
body {
padding-top: 50px;
}
#test {
margin: 0 auto;
background-color: maroon;
box-shadow: 0 -20px 7px -6px black;
height: 45px;
width: 60px;
transform: perspective(150px) rotateX(-45deg);
transform-origin: center bottom 0;
}
<div id="test"></div>
This question already has answers here:
Border Gradient with Border Radius
(2 answers)
Closed 1 year ago.
I have an background image in shape of a circle. Have given it a yellow border. I would like to change the border to a gradient from yellow to white. I have seen many examples with square borders but none applied to circles. Here's my code:
.Profileimage{
background-image: url("images/profilePic.jpg");
background-repeat: no-repeat;
background-size: cover;
overflow:hidden;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50%;
width:100px;
height:100px;
border: 5px solid rgb(252,238,33);
}
<div class="Profileimage"></div>
Thanks!!
This Is Your Answer:
#cont{
background: -webkit-linear-gradient(left top, crimson 0%, #f90 100%);
width: 300px;
height: 300px;
border-radius: 1000px;
padding: 10px;
}
#box{
background: black;
width: 300px;
height: 300px;
border-radius: 1000px;
}
<div id="cont">
<div id="box"></div>
</div>
Maybe something like this?
.Profileimage{
position: relative;
background: linear-gradient(rgb(252,238,33), rgb(255,255,255));
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50%;
width:100px;
height:100px;
}
.Profileimage:after{
position: absolute;
display: block;
top: 5px;
left: 5px;
width: 90px;
height: 90px;
content: "";
background-color: #fff;
background-image: url("images/profilePic.jpg");
background-repeat: no-repeat;
background-size: cover;
border-radius: 50%;
overflow: hidden;
}
Not sure if that's what you're looking for, but you can just set the background to the gradient, and then position an element over the top (here I'm using the 'after' pseudo selector)
Fiddle: http://jsfiddle.net/6ue88pu6/1/
I see that this question is already old, but i just had the same problem and i could fix it.
The trick is to wrap your div into another div.
.gradient-wrapper { padding: 10px; border-radius: 50%; display: inline-block;
background: yellow; // As fallback for browsers which do not support gradient
background: -webkit-linear-gradient(yellow, white);
background: -o-linear-gradient(yellow, white);
background: -moz-linear-gradient(yellow, white);
background: linear-gradient(yellow, white);
}
#maincircle { width: 100px; height: 100px; background: #424242; border-radius: 50%; }
<div class="gradient-wrapper">
<div id="maincircle">
</div>
</div>
Result:
Hope this helped!
I am currently using CSS3 to make an div with the left side angled like a trapezium using the following CSS adapted from this jsfiddle:
background:linear-gradient(75deg, transparent 75px, #35753f 76px);
I would like to combine the following CSS background with a radial one, to create the effect shown in the image below. However, when I do this, I lose the angled side. What is the best way to combine these two backgrounds?
Here is the radial background:
background:radial-gradient(circle closest-corner at right center, #337540 0%, #003832 100%);
Here is what it should look like:
Here is a jsfiddle of the below:
.container {
width: 1024px;
margin: 0 auto;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#top-banner {
position: relative;
}
#top-banner .container {
height: 350px;
}
#top-banner #banner-right {
width: 350px;
height: 350px;
background: -moz-linear-gradient(75deg, transparent 75px, #35753f 76px);
background: -o-linear-gradient(75deg, transparent 75px, #35753f 76px);
background: -webkit-linear-gradient(75deg, transparent 75px, #35753f 76px);
background: linear-gradient(75deg, transparent 75px, #35753f 76px);
position: relative;
float: right;
}
#top-banner #banner-right:after {
content: ".";
display: block;
height: inherit;
width: 5000px;
left: 350px;
top: 0;
position: absolute;
/* IE10 Consumer Preview */
background-image: -ms-radial-gradient(left center, circle closest-corner, #337540 0%, #003832 100%);
/* Mozilla Firefox */
background-image: -moz-radial-gradient(left center, circle closest-corner, #337540 0%, #003832 100%);
/* Opera */
background-image: -o-radial-gradient(left center, circle closest-corner, #337540 0%, #003832 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, left center, 0, left center, 140, color-stop(0, #337540), color-stop(1, #003832));
/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(left center, circle closest-corner, #337540 0%, #003832 100%);
/* W3C Markup, IE10 Release Preview */
background-image: ;
z-index: -100;
}
/*#top-banner #banner-right {
width:350px;
height:350px;
background:black;
position:relative;
float: right;
}
#top-banner #banner-right:before {
content:"";
position:absolute;
top:0;
left:0;
width: 0;
height: 0;
border-bottom: 350px solid white;
border-right: 40px solid transparent;
}*/
#top-banner .slider {
float: left;
height: 350px;
width: 100px;
background-color: black;
background-size: cover;
shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
<div id="top-banner">
<div class="container clearfix">
<div id="banner-right">
</div>
<div class="slider">
<img src="http://1.bp.blogspot.com/-9aQmrN3-xpQ/TuYsXHQygrI/AAAAAAAAAtw/cEmz4PgEQdQ/s1600/r-NEW-SPECIES-MEKONG-DELTA-huge.jpg" height="350" alt="banner-1" />
</div>
</div>
</div>
Angled div - 2 methods
The angle is created with transform: rotate and not the linear-gradient.
#1 - Rotated :before with translate 3d
In this example, translate3d(0px,0px,1px) is used to eliminate the jagged edge of the rotated element. More information here. I was reminded about this technique from this answer dealing with a similar rendering problem.
As this is a hack that should be used sparingly, their is an alternative way to mask this edge without it in the second example.
Rotate a pseudo element, :before, of the div. This will create our angled edge
The :before gets an appropriate percentage height, width: 100px and is positioned appropriately
The parent div is given overflow: hidden to cut off the background cleanly
Create a second pseudo element, :after, to extend the background to the edge of the viewport.
The gradient background is applied to :after
The :before pseudo element is given a solid background the same color as the edge of the gradient to blend
The :before and :after pseudo elements are given z-index: 1
Elements that will sit above the "background" will need position: relative and z-index: 2 to push them above it. (Like the paragraph in the example below)
Example
The linear-gradient on the body demonstrates that the div can be placed over any background.
body {
background: linear-gradient(#000 0%, #FFF 100%) no-repeat;
margin: 0;
}
div {
position: relative;
height: 350px;
overflow: hidden;
padding-left: 100px;
min-width: 500px;
}
div:before {
content: '';
display: block;
position: absolute;
height: 120%;
width: 90px;
top: -10%;
left: 90px;
background: #003832;
transform: translate3d(0px,0px,1px) rotate(-15deg);
z-index: 1;
}
div:after {
content: '';
display: block;
position: absolute;
height: 120%;
width: 100%;
top: -10%;
left: 135px;
background: radial-gradient(circle closest-corner at 50% 50%, #33753E 0%, #003832 80%);
z-index: 1;
}
p {
color: #FFF;
left: 10px;
position: relative;
z-index: 2;
}
<div>
<p>This is some text</p>
</div>
#2 - Rotated :before and :after without translate 3d
Rotate a pseudo element, :before, of the div
Apply the background to the pseudo element
The pseudo element gets height: 200% and width: 200% and is positioned appropriately
The parent div is given overflow: hidden to cut off the gradient cleanly and the rotated pseudo element becomes the background
A second pseudo element, :after, is used to help mask the jagged edge with a box-shadow (the left edge is jagged at all rotations that are not 45deg increments)
The :before and :after pseudo elements are given z-index: 1
Elements that will sit above the "background" will need position: relative and z-index: 2 to push them above it. (Like the paragraph in the example below)
Example 1
body {
background: linear-gradient(#000 0%, #FFF 100%) no-repeat;
}
div {
position: relative;
width: 500px;
height: 350px;
overflow: hidden;
padding-left: 100px;
}
div:before,
div:after {
content: '';
display: block;
position: absolute;
height: 200%;
width: 200%;
top: -220px;
left: 90px;
background: radial-gradient(circle closest-corner at 20% 50%, #33753E 0%, #003832 100%);
transform: rotate(-15deg);
z-index: 1;
}
div:after {
top: -220px;
left: 92px;
box-shadow: 0 0 2px 2px #003832;
}
p {
color: #FFF;
z-index: 2;
position: relative;
}
<div>
<p>This is some text</p>
</div>
Example 2 - extended
body {
background: linear-gradient(#000 0%, #FFF 100%) no-repeat;
margin: 0;
}
div {
position: relative;
height: 350px;
overflow: hidden;
padding-left: 100px;
max-width: 1600px;
}
div:before,
div:after {
content: '';
display: block;
position: absolute;
height: 300%;
width: 300%;
top: -200%;
left: 90px;
background: radial-gradient(circle closest-corner at 20% 50%, #33753E 0%, #003832 100%);
transform: rotate(-15deg);
z-index: 1;
}
div:after {
left: 92px;
box-shadow: 0 0 2px 2px #003832;
}
p {
color: #FFF;
z-index: 2;
position: relative;
left: 80px;
}
<div>
<p>This is some text</p>
</div>
If you want it to be exactly as you shown on a picture - try :before pseudoclass.
#div_with_background{
position: relative;
background: radial-gradient(circle closest-corner at 60% 50%, #33753E 0%, #003832 100%);
width: 567px;
height: 356px;
}
#div_with_background:before{
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 0;
height: 0;
border-style: solid;
border-width: 356px 0 0px 130px;
border-color: transparent transparent transparent #FFFFFF;
z-index: 1;
}
<div id="div_with_background"></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;