I'm trying to put two inclined divs side by side. I don't know if this is possible in CSS, but I want to do something like this:
It's just an example.
I was thinking about using a gradient background, but it doesn't work, because I want to do a responsive layout with multiple backgrounds.
<style>
body {
background:
linear-gradient(
to top left,
black,
black 50%,
rgba(0,0,0,0) 50%,
rgba(0,0,0,0)
)
top center no-repeat,
linear-gradient(
to top right,
black,
black 50%,
#007bff 50%,
#007bff
)
top center no-repeat;
background-size:40% 200%;
background-color: black;
padding:0;
margin:0 auto;
min-height:100%;
}
}
</style>
You may want something like this:
<html>
<head>
<style type="text/css">
#bleft {
border-bottom: 500px solid black;
border-right: 500px solid transparent;
float:left;
}
#bright {
border-bottom: 500px solid black;
border-left: 500px solid transparent;
float:right;
}
</style>
</head>
<body>
<div id="bleft"></div>
<div id="bright"></div>
</body>
<body>
<div id="bleft"></div>
<div id="bright"></div>
</body>
Related
A CSS Layout Problem
Currently I'm not happy with my standard <hr> dotted lines. The results are far from the holy grail dotted lines I was looking for.
hr{
border-bottom: 1px dotted Black;
border-top: none;
margin: 1em 0;
}
Please open image at 100% scaling in a separate window.
The dots are too close to each other and I don't want dashed lines with black stripes. I want dots but with more spacing in between them.
Desire for (and Design of) the Pure Elusive Holy Grail Dotted Line
In my dreams I see in front of me a pure CSS dotted line, like in this image (made in Photoshop).
Please open image at 100% scaling in a separate window.
A horizontal rule that meets the following criteria:
A height of 1px
A repeating pattern of 2 pixels transparent gap followed by a 1 Black pixel
Has a 100% width (give or take 3 pixels)
From the first dot till the last dot, at no point are there dots pushed together (black dots too close together) or pulled apart (more than 2 pixels gap spacing in between Black dots)
A pure CSS layout using CSS Background Radial-Gradient
Where I'm stuck now
I cannot get this to work properly yet. What have I overlooked and why is the following not working?
hr{
background-image: radial-gradient(circle closest-side, Black 100%, Black 100%);
background-position: 0 0, 100% 100%, 0 0;
background-repeat: repeat-x;
background-size: 3px 1px;
}
Until the solution, the search for the elusive holy grail hr remains untackled.
html{ margin: 7em; background: #EEE}
article { background: lightblue; height: 100px; padding: 2em}
hr{
border-bottom: 1px dotted Black;
border-top: none;
margin: 1em 0;
}
hr{
background-image: radial-gradient(circle closest-side, Black 100%, Black 100%);
background-position: 0 0, 100% 100%, 0 0;
background-repeat: repeat-x;
background-size: 3px 1px;
}
<article>
<p> Text </p>
<hr>
<p> Text </p>
</article>
The following code works. Although I have no idea why and how precisely. Other more elegant answers, improvements and suggestions are welcome that can further explain the workings of the magic here.
After many trials I have figured out that the first number represents the gap size and the second number represents the dot width in background-size: 3px 1px;
hr{
border: none;
background-image: radial-gradient(circle closest-side, Black 100%, Transparent 100%);
background-position: 0 50%;
background-repeat: repeat-x;
background-size: 3px 1px; // GAP width and DOT width
height: 1px;
}
html{ margin: 4em; background: #EEE}
article { background: lightblue; height: 100px; padding: 2em}
hr{
border: none;
background-image: radial-gradient(circle closest-side, Black 100%, Transparent 100%);
background-position: 0 50%;
background-repeat: repeat-x;
background-size: 3px 1px; /* First Nr is the GAP width, second Nr is the DOT width */
height: 1px;
}
<article>
<p>Text</p>
<hr>
<p>Text</p>
</article>
I am attempting to add a radial-gradient background to my header. I am using radial-gradient to add a curve effect to the bottom of the header. I would like to have an effect where the color from the top to the header is lighter which gets darker farther down the container. Currently, my header has the curve I desire but the color shown is 1 solid color instead of a fade.
Can I achieve this look using radial-gradient?
Photo of the desired look:
Code snippet of CSS:
<html>
<head>
<style>
#container {
height: 200px;
width: 400px;
background: radial-gradient(100% 95% at top,#E8F3F9 100%,#0000 );
border: 1px dotted wheat;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
I've attempted to add a lighter hex color #fefefe to the at top piece of the background CSS but that ended up turning the entire header 1 color.
background: radial-gradient(#fefefe 100% 95% at top,#E8F3F9 100%,#0000 );
move the gradient to mask then use another one as background:
#container {
height: 200px;
width: 400px;
-webkit-mask: radial-gradient(100% 95% at top, #000 100%, #0000);
mask: radial-gradient(100% 95% at top, #000 100%, #0000);
background: linear-gradient(#0000,#E8F3F9);
}
<div id="container"></div>
Basically you are trying to create a hard line using gradients. Here you can find some uses of gradients including hard lines Using CSS gradients.
To create a hard line you have to define the same position for two colors.
In this case it look like the following code.
<html>
<head>
<style>
#container {
height: 200px;
width: 400px;
background: radial-gradient(100% 95% at top,#ffffff 5%, #E8F3F9 100%,#ffffff 100% );
border: 1px dotted wheat;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
where the #E8F3F9 and #ffffff are at the 100% position.
I added #ffffff 5% to create the top light effect.
I'm working on a website and I need to cut off the top left corner of the main body.
After that I want to apply a shadow on the main body. This shadow should not go around the original box it should follow the main body with the new cut off corner - I used drop-shadow for this.
I tried using gradient background but no matter what I try my header is either overlapping the main body or the shadows don't work
My current attempt is this: https://codepen.io/Sophvy/pen/MWgMZzG
HTML:
<div id ="main1">
<div id ="wrap"></div>
<header>
</header>
<main>
</main>
</div>
CSS:
#main1 {
height:500px;
width:500px;
position:relative;
}
#wrap {
width:500px;
height:500px;
background: linear-gradient(135deg, transparent 70px,green 0);
filter: drop-shadow(0px 0px 10px blue);
position:absolute;
}
header {
height:55px;
max-width:100%;
background-color:#eee;
position: relative;
}
My Issue here is that the header doesn't get cut off so its just overlapping.
I tried using z-index but couldn't get it to work even with position:absolute / relative on each element. I looked at a lot of different ideas but I haven't found any that handle the same problem that I'm having with my header.
What do I need to change to cut off the corner of the main body and the header, and then afterwards get a working shadow?
EDIT: my solution
HTML:
<div id="background">
<div id ="main1">
<div id ="wrap">
<header>
header
</header>
<main>
main
</main>
</div>
</div>
</div>
CSS:
#background {
height:500px;
width:600px;
padding-top: 5px;
background-color:#bbb;
padding-bottom: 5px;
}
#main1 {
margin: 10px auto;
width: 90%;
height:400px;
text-align:right;
filter: drop-shadow(0px 0px 10px blue);
}
#wrap {
width:500px;
height:500px;
background: linear-gradient(135deg, transparent 70px,green 0);
clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 25%);
position:absolute;
}
header {
height:55px;
max-width:100%;
background-color:#eee;
position: relative;
}
You where very close!
If you use a clip-path you can cut both the header and the main part of the box.
When you then set the drop-shadow filter on the main element you should get the desired style.
#main1 {
height:500px;
width:500px;
filter: drop-shadow(0px 0px 10px blue);
}
#wrap {
width:500px;
height:500px;
background: linear-gradient(135deg, transparent 70px,green 0);
clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 25%);
position:absolute;
}
header {
height:55px;
max-width:100%;
background-color:#eee;
position: relative;
}
<div id ="main1">
<div id ="wrap">
<header>
</header>
<main>
</main>
</div>
</div>
So I've been at it for a while trying to achieve this one shape with CSS with no good solutions. I need this to be an image because this div may resize and I want it to stay intact. I've also attempted to create an SVG which did not work out very well, I've seen some people work with gradient to make shapes but I'm not able to find any good guide to point me in the right direction. Any help is appreciated :)
Using gradients with angles is not fit for your case because (as already pointed out by King King in comments) as the width the increases, the angle of the gradient (or) the color stop percentages need to be modified to maintain the shape. That is very tricky and so this method can be employed only when the shape has fixed dimensions.
However gradients can still be used with the to [side] [side] syntax because gradients defined using this syntax can adapt to variations in container sizes. In this method no pseudo-elements are used.
$(document).ready(function() {
$('#increase').on('click', function() {
$('.gradient').css('width', '300px').css('height', '500px');
})
})
div {
display: inline-block;
vertical-align: top;
height: 300px;
width: 100px;
margin: 10px;
color: beige;
transition: all 1s;
}
.gradient {
padding: 10px;
background: linear-gradient(to top right, transparent 50%, tomato 50%) no-repeat, linear-gradient(to top right, transparent 0.1%, tomato 0.1%) no-repeat;
background-size: 100% 100px, 100% 100%;
background-position: 0% 100%, 0% -100px;
}
/* Just for demo */
body {
background: -webkit-radial-gradient(50% 50%, circle, aliceblue, steelblue);
background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gradient">Some content</div>
<br>
<br>
<button id="increase">Increase Width & Height</button>
Note that it is better to make sure that the text doesn't flow into the slanted section of the shape because wrapping the text around to fit within the shape is not straight-forward.
I have attempted to make that in css as per ur image. http://jsfiddle.net/3zkme/- See if this could help. Thanks.
HTML
<div style="margin:30px">
<div class="trapezoid">
</div>
</div>
CSS
.trapezoid{
top: 150px;
vertical-align: middle;
border-bottom: 120px solid red;
border-left: 200px solid transparent;
border-top-left-radius:0px;
height: 0;
width: 150px;
transform:rotate(270deg);
-ms-transform:rotate(270deg); /* IE 9 */
-webkit-transform:rotate(270deg); /* Opera, Chrome, and Safari */
}
/* ---------- */
.trapezoid {
position:relative;
}
.trapezoid:after {
content:' ';
left:-14px;
top:10px;
position:absolute;
background:red;
border-radius:0px 0 0 0;
width:164px;
height:40px;
display:block;
}
You do not use a gradient for this, you just need to use a pseudo-element like :after.
Sample code:
#bookmark {
width: 50px;
height: 100px;
position: relative;
background: red;
}
#bookmark:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 35px solid #FFF;
border-right: 50px solid transparent;
}
Live JSFiddle
If you want the shape to be filled in with a gradient, you can do that, too. Just add that to the CSS:
background: linear-gradient(to right, #ff0000 0%,#B00000 100%);
given a div that is 500px wide, is there a way to fill the background with 2 different colors using css? I know it can be done with a background image, but just wondering if it can be done with bg color.
eg :
You can't set multiple background colors, but you could set something like:
div.twocolorish {
background-color: green;
border-left: 20px solid red;
}
As long as you don't need text to go over the part in red then this would take care of you in one div.
I ended up with this solution using linear gradients:
.dualcol-test {
background: linear-gradient(to right, green 0%, green 80%, red 80%, red 100%);
}
<div class="dualcol-test"> This div has a green and red background <br><br><br> </div>
You can achieve 2 colors in 1 div by using pseudo-element :before
HTML:
<div class="twocolordiv"></div>
CSS:
.twocolordiv {
position: relative;
z-index: 9;
background: green;
width:500px;
height:100px;
}
.twocolordiv:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 20%;
bottom: 0;
left: 0;
background: red;
}
You can use linear-gradient background to do this
background: linear-gradient(90deg, green 50%,red 50%);
No, you can only set one background-color. However, you could split your container into two and set a different backgorund-color for each one.
This question got me thinking about how CSS3 would approach this problem.. and frankly the specification has me confused. That said, a couple of features that are creeping through the cracks: background-size and linear-gradient.
<style type="text/css">
#ji { width: 500px; height: 300px;
background:
-moz-linear-gradient(green, green) 0px 0px no-repeat,
-moz-linear-gradient(red, red) 200px 50px no-repeat,
-moz-linear-gradient(blue, blue) 0px 250px no-repeat,
-moz-linear-gradient(gray, gray) 300px 125px no-repeat;
-moz-background-size: 450px 50px, 50px 200px, 250px 250px, 50px 250px;
}
</style>
<div id="ji">
</div>
Give this a go :)
I'm sure there are better approaches to this problem, but it does demonstrate that we'll be afforded greater flexibility with CSS backgrounds (one day).
Edit: Forgot to mention that this will only work in Firefox, though there are Webkit equivalents for linear-gradient and background size
Using the :before css attribute allows you to 'fill' a div with the two colours.
.myDiv {
position: relative; /*Parent MUST be relative*/
z-index: 9;
background: green;
/*Set width/height of the div in 'parent'*/
width: 100px;
height: 100px;
}
.myDiv:before {
content: "";
position: absolute; /*set 'child' to be absolute*/
z-index: -1; /*Make this lower so text appears in front*/
/*You can choose to align it left, right, top or bottom here*/
top: 0;
right: 0;
bottom: 60%;
left: 0;
background: red;
}
<div class="myDiv">this is my div with multiple colours. It work's with text too!</div>
An easily edited sample can be seen LIVE DEMO
Using background-image / repeat-y is the easiest solution - however, maybe you want to change colours or widths or something with Javascript.
Here's a way to do this which allows text everywhere.
http://jsfiddle.net/WQ8CG/
HTML:
<div id="container"><div class="offset">text</div></div>
CSS:
#container {
background: #ccc;
border-right: 40px solid #aaa
}
.offset {
margin-right: -40px;
zoom: 1; /* to fix IE7 and IE6 */
position: relative /* to fix IE6 */
}
Better late then never. Thought this might help:
The htmls
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
The csss
#content { background-color: #F1EBD9; }
#left { float: left; width: 14em; }
#right { margin-left: 14em; background-color: #FFF; }
You can view this # http://alexandergutierrez.info/stretch-background-color-in-a-two-col-layout
You could you inset box shadow, and change the shadow to whatever colour you required.
CSS
-moz-box-shadow: inset 50px 0px 0px 0px rgba(156, 244, 255, 1);
-webkit-box-shadow: inset 50px 0px 0px 0px rgba(156, 244, 255, 1);
box-shadow: inset 50px 0px 0px 0px rgba(156, 244, 255, 1);