I'm creating a basic webpage, but for the footer there is going to be a slanted edge that will run at the bottom of the page. Where I am having issues as you are unable to add 100% on a border, as i am using bootstrap, so the page must be responsive. Is there a way to achieve this affect whilst being responsive.
div {
width:200px;
height:80px;
background: red;
top:150px;left:100px;
position: relative;
}
div:before {
content: '';
position: absolute;
top: 40px; right: 0;
border-right: 200px solid white;
border-top: 40px solid red;
width: 20;
}
http://jsfiddle.net/2bZAW/3675/
This should work for you. Again, I've used a pseudo element in order to alter the color, but the general consensus is the same. Both the linked question and this use overflow:hidden on the parent and hence won't scroll. As for rotating, since I've used a pseudo element, this should not be an issue:
.wrap {
height: 500px;
width: 100%;
display: inline-block;
position: relative;
overflow: hidden;
z-index: 8;
}
.wrap:after {
content: "";
position: absolute;
height: 130%;
width: 100%;
transform: skewY(-4deg);
background: tomato;
top: -50%;
z-index: -2;
left: 0;
}
.lower {
position: absolute;
bottom: 15%;
right: 0;
}
<div class="wrap">
Hello, World!
<div class="lower">Wanted text here?</div>
</div>
Related
I'm trying to create the following functionality:
Have two transparent images layered on top of each other inside of a <div>; one is an object and the other image represents the 'glow' around the object.
On hover, I want the glow to change colors, but I do not want the original object to change colors.
Here's my existing setup:
HTML:
<div id="container">
<div id="constellation">
</div>
<img src="https://storage.googleapis.com/astrology-images/constellations/aquarius-white.png"/>
</div>
CSS:
#container {
position: relative;
background: black;
width: 800px;
height: 250px;
}
#constellation {
position: absolute;
top: 0px;
left: 0px;
width: 250px;
height: 250px;
background-image: url("https://storage.googleapis.com/astrology-images/constellations/aquarius-halo-white.png");
}
#constellation:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #4E6F2E;
mix-blend-mode: multiply;
opacity: 0;
}
#constellation:hover:after {
opacity: 1;
}
I've created an image of a constellation that lives in the <img>; this should always stay white.
In a separate <div> I have an image for the "halo"; this image uses the mix-blend-mode to multiply the image with a color on hover.
Unfortunately, the way I have it now has both images multiplied by the same color, even though they are in different elements! I have a live example here: I have an example here: https://jsfiddle.net/wcL2exa4/105/
How can I get my desired behavior?
The problem is that #constellation:after is positioned above your image. Set a higher z-index for your image and hover trigger on the parent.
#container {
position: relative;
background: black;
width: 800px;
height: 250px;
}
img {
position: relative;
z-index: 2;
}
#constellation {
position: absolute;
top: 0px;
left: 0px;
width: 250px;
height: 250px;
background: url("https://storage.googleapis.com/astrology-images/constellations/aquarius-halo-white.png");
}
#constellation:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: red;
mix-blend-mode: multiply;
opacity: 0;
}
#container:hover #constellation:after {
opacity: 1;
}
See example here: https://jsfiddle.net/pcaoyb7s/
I am trying to add background color beyond the container in CSS.
But the problem I am facing is: it overlaps the container and I am unable to show background before the container.
HTML code is here
<div class="container">Some content here </div>
And CSS code
.container { padding: 15px; background-color: #eee;
/* For centering the container */
margin: 0 auto; }
/* CSS for background before the container */
.container::before { content: "";
background-color: red;
width: 300%;
height: auto;
left: -100%;
top: 0;
position: absolute;
z-index: -1;
}
Please let me know what mistake I am doing.
You are missing the height on the :before so the background is not visible:
.container {
padding: 15px;
background-color: #eee;
margin: 0 auto;
margin:50px;
}
.container:before { content: "";
background-color: red;
width: 300%;
height: auto;
left: -100%;
top: 0;
position: absolute;
height:50px;
}
<div class="container">Some content here</div>
I've got a div with overflow: hidden, and a fairly large collection of elements inside it, which I want to be hidden while overflowing their parent. However I've also got two custom dropdowns, which I'd like to overlap and exit the div while open. Is there anyway to avoid the overflow hidden effect for specific elements? Here's an example. Say I want the blue square to go over the red border and overflow it's parent's bounds, but want the green one to remain cut off and hidden.
YOu can overlap/hidden of certain element with pseudo elements see this example.
html
<div class="red">
<div class="blue"></div>
<div class="green"></div>
</div>
css
* {
box-sizing: border-box;
}
.red {
position: relative;
border: 3px solid red;
width: 300px;
height: 300px;
}
.red:after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 70px;
background: rgb(243, 245, 246);
bottom: -70px;
z-index: -1;
}
.blue,.green {
position: absolute;
width: 70px;
height: 70px;
bottom: -40px;
}
.blue {
background-color: blue;
z-index: 1;
left: 40px;
}
.green {
background-color: green;
z-index: -1;
right: 40px;
}
here is fiddle
how to make a cropped div from top right corner.
like suppose i have a square image and i cut top right corner in circle shape. my question is how to make remaining shape of square image by using pure css???
please help me!!
my code:
div {
height: 300px;
background: red;
position: relative;
}
div:before {
content: '';
position: absolute;
top: 0; right: 0;
border-top: 80px solid white;
border-left: 80px solid red;
width: 0;
}
this code folding top right corner like fold a page. but i need circle cut on top right corner.
Very simlar to #web-tiki answer, but using a box-shadow to paint background , so body background can be seen through. DEMO
div {
height: 150px;
width:150px;
overflow:hidden;
position: relative;
}div:before {
content: '';
position: absolute;
top: -40px; right: -40px;
height: 80px ;
width: 80px;
border-radius:100%;
box-shadow:red 0 0 0 500px;
}
Your question is very unclear, but here's two interpretations I can come up with based on it:
div {
height: 300px;
background: red;
position: relative;
border-top-right-radius: 80px;
}
<div></div>
Or option two:
div {
height: 300px;
background: red;
position: relative;
}
div:before {
content: '';
position: absolute;
top: 0; right: 0;
width: 80px; height: 80px;
background: white;
border-bottom-left-radius:80px;
}
<div></div>
Here is what I have so far: http://jsfiddle.net/F8AN4/
I want a border on each side of the div that is vertically centered and is pointing to the left/right sides of the screen. I've seen this done a lot, but can't for the life of me figure out how to do it!
It would look like:
-----|DIV|------
CSS
div {
background: lightgreen;
height: 100px;
margin: 0 auto;
position: relative;
width: 200px;
}
div::after {
border-right: 10px solid black; // not sure how to do this.
content: "";
top: 0; left: 0; right: 0; bottom: 0;
position: absolute;
}
div::before {
content: "";
top: 0; left: 0; right: 0; bottom: 0;
position: absolute;
}
Any ideas?
You will need two wrapping containers: an inner div that holds the content, and an outer div:
<div class="outer">
<div class="inner"></div>
</div>
The CSS is simple — the outer div will need to have 100% width (so that the pseudo-element can stretch to the full width), while the inner div can have a width that you designate later.
.inner {
background: lightgreen;
height: 100px;
margin: 0 auto;
width: 200px;
}
.outer {
position: relative;
width: 100%;
}
.outer:before {
border: 1px solid #000;
box-sizing: border-box;
content:"";
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
The CSS transform property is used to ensure that the pseudo-element is perfectly vertically centered — it matters when the horizontal line you want is thick.
If you want odd-numbered dimensions for the horizontal line, you can choose to specify the height of a single border, i.e. border-top: 1px solid #000;, or abandon the border property and set the height and background-color. It works either way :)
http://jsfiddle.net/teddyrised/F8AN4/9/
[Edit]: Remove the bottom margin on outer div, it was not necessary for the code to work ;)
FIDDLE
HTML
<div><span>TEXT</span></div>
CSS
div {
margin-top:10px;
height: 1px;
border-top: 1px solid black;
text-align: center;
position: relative;
}
span {
position: relative;
top: -.7em;
background: lightgreen;
display: inline-block;
border-width:0 2px;
border-color:black;
border-style:solid;
}
Is this what you're looking for?
http://jsfiddle.net/F8AN4/3/
I guess there is a more beautiful way to do it maybe someone has a better idea :)
<div id="main">
<div class="hrleft"></div>
<div class="mid"></div>
</div>
div.hrleft {
height: 45px;
width: 200px;
border-bottom: 10px solid black;
float: left;
}