Div height fill container with margin - html

Take a look at my html and css:
html , body{
width: 100%;
height: 100%;
margin: 0 0 0 0;
}
.wrapper {
background: -webkit-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
background: -o-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
background: -ms-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
background: -moz-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
background: linear-gradient(to bottom, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
width: 100%;
height: 100%;
position: absolute;
overflow: auto;
}
.content {
margin: 10px auto 20px auto;
width: 724px;
border: black 1px solid;
}
HTML:
<body>
<div class="wrapper">
<div class="content">
</div>
</div>
</body>
My wrapper div on default take window width and window height as its size. I want my content div always fill wrapper height and keep its margin, the problem is I can't set content div's height = 100% because it has margin, and will make wrapper div overflow. Here is my jsfiddle
Edit
Example to clarify the question:
Assume that div.wrapper's height = 200px
div.content's height will be 200 - (10 + 20) = 170px
I know I can do this by jquery but I want to find a solution with html/css
Note: div.wrapper's height depend on user screen resolution.
SOLVE
Thanks for your guys attention! I really appreciate it. And I found the solution here by using css3 calc function. I think this information will helpful to you.


Here is the Solution.
The HTML:
<body>
<div class="wrapper">
<div class="content">
</div>
</div>
</body>
The CSS:
html , body{
width: 100%;
height: 100%;
margin: 0 0 0 0;
}
.wrapper {
background: -webkit-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
background: -o-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
background: -ms-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
background: -moz-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
background: linear-gradient(to bottom, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
width: 100%;
height: 100%;
position: absolute;
overflow: auto;
}
.content {
margin: 10px auto 20px auto;
width: 724px;
border: black 1px solid;
height:inherit;
overflow:auto;
background:blue;
width:auto;
}
The issue was in the content class. If you want the content div wrap the height of wrapper div, a height:inherit; has to be specified which inherits the height of its parent div.
Hope this helps.


Check this fiddle http://jsfiddle.net/sarfarazdesigner/T7D32/9/
updated fiddle http://jsfiddle.net/sarfarazdesigner/T7D32/13/
i have done some minor changes in your css code here is
html , body{
width: 100%;
height: 100%;
margin: 0;
}
.wrapper {
background: -webkit-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
background: -o-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
background: -ms-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
background: -moz-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
background: linear-gradient(to bottom, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
overflow: auto;
padding:10px 0 20px 0;
}
.content {
margin:0 auto;
width: 724px;
border: black 1px solid;
height:100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
it will work let me know if you have any problem


change the .content class css like this, your problem will be solved.
.content {
margin: 10px auto 20px auto;
width: 724px;
border: black 1px solid;
overflow: auto;
height: 100%
}

Related

Making a div vertically centered causing it to be slightly horizontally off centered

So, I'm trying to make a div vertically centered using CSS position and transform method but apparently it is making the div slightly horizontally off centered. here's my code:
HTML:
<div class="row container-fluid top_header">
<div class="col-12 container-xl">
<div class="top_header_texts"></div>
</div>
</div>
CSS:
.top_header {
box-sizing: border-box;
background-image: radial-gradient(circle at 19% 90%, rgba(190, 190, 190,0.04) 0%, rgba(190, 190, 190,0.04) 17%,transparent 17%, transparent 100%),radial-gradient(circle at 73% 2%, rgba(78, 78, 78,0.04) 0%, rgba(78, 78, 78,0.04) 94%,transparent 94%, transparent 100%),radial-gradient(circle at 45% 2%, rgba(18, 18, 18,0.04) 0%, rgba(18, 18, 18,0.04) 55%,transparent 55%, transparent 100%),radial-gradient(circle at 76% 60%, rgba(110, 110, 110,0.04) 0%, rgba(110, 110, 110,0.04) 34%,transparent 34%, transparent 100%),radial-gradient(circle at 68% 56%, rgba(246, 246, 246,0.04) 0%, rgba(246, 246, 246,0.04) 16%,transparent 16%, transparent 100%),radial-gradient(circle at 71% 42%, rgba(156, 156, 156,0.04) 0%, rgba(156, 156, 156,0.04) 47%,transparent 47%, transparent 100%),radial-gradient(circle at 46% 82%, rgba(247, 247, 247,0.04) 0%, rgba(247, 247, 247,0.04) 39%,transparent 39%, transparent 100%),radial-gradient(circle at 50% 47%, rgba(209, 209, 209,0.04) 0%, rgba(209, 209, 209,0.04) 45%,transparent 45%, transparent 100%),linear-gradient(90deg, rgb(84, 36, 210),rgb(44, 27, 154));
background-size: cover;
background-repeat: no-repeat;
margin: 0 0 0 0;
width: 100%;
height: 95vh;
position: relative;
}
.top_header_texts {
display: block;
margin: 0 auto;
color: White;
font-weight: bold;
font-size: 60px;
position: absolute;
top:50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
background-color: red;
}
Result:
As you can see there's a little gap in the left but nothing in the right, this is nothing major but bothering me and couldn't get anything to sort this out

Assuming you are using the latest version of bootstrap. (4.1.1)
The .container-fluid and .col-12 have padding attributes, and you can try to overwrite it by .p-0 class
<div class="row container-fluid top_header p-0">
<div class="col-12 container-xl p-0">
<div class="top_header_texts"></div>
</div>
</div>
Online Verification

container-fluid and container-xl classes of bootstrap brings padding-left:15px. try setting it to zero.
HTML:
<div class="row container-fluid top_header paddingLeft_0">
<div class="col-12 container-xl paddingLeft_0">
<div class="top_header_texts"></div>
</div>
</div>
CSS:
div.paddingLeft_0 {
padding-left:0;
}

Just a text-align: center fixes the problem, as you see:
.top_header {
box-sizing: border-box;
background-image: radial-gradient(circle at 19% 90%, rgba(190, 190, 190,0.04) 0%, rgba(190, 190, 190,0.04) 17%,transparent 17%, transparent 100%),radial-gradient(circle at 73% 2%, rgba(78, 78, 78,0.04) 0%, rgba(78, 78, 78,0.04) 94%,transparent 94%, transparent 100%),radial-gradient(circle at 45% 2%, rgba(18, 18, 18,0.04) 0%, rgba(18, 18, 18,0.04) 55%,transparent 55%, transparent 100%),radial-gradient(circle at 76% 60%, rgba(110, 110, 110,0.04) 0%, rgba(110, 110, 110,0.04) 34%,transparent 34%, transparent 100%),radial-gradient(circle at 68% 56%, rgba(246, 246, 246,0.04) 0%, rgba(246, 246, 246,0.04) 16%,transparent 16%, transparent 100%),radial-gradient(circle at 71% 42%, rgba(156, 156, 156,0.04) 0%, rgba(156, 156, 156,0.04) 47%,transparent 47%, transparent 100%),radial-gradient(circle at 46% 82%, rgba(247, 247, 247,0.04) 0%, rgba(247, 247, 247,0.04) 39%,transparent 39%, transparent 100%),radial-gradient(circle at 50% 47%, rgba(209, 209, 209,0.04) 0%, rgba(209, 209, 209,0.04) 45%,transparent 45%, transparent 100%),linear-gradient(90deg, rgb(84, 36, 210),rgb(44, 27, 154));
background-size: cover;
background-repeat: no-repeat;
margin: 0 0 0 0;
flex: 0 0 100%;
height: 95vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.top_header .col-12 {
width: 100%;
}
.top_header_texts {
margin: 0 auto;
color: White;
font-weight: bold;
font-size: 60px;
background-color: red;
text-align: center
}
<div class="row container-fluid top_header">
<div class="col-12 container-xl">
<div class="top_header_texts">text</div>
</div>
</div>

use .text-center or .mx-auto to keep content on the center

How to create this button with CSS?

How would one create the following button using CSS?
The fact that it is skewed is not the issue. The part I'm not sure about is the diagonal split in color that's positioned from corner to corner. Im not sure how to define a gradient in such a way that it would work for all button dimensions responsively.
I have the following so far, for a skewed button without the diagonal difference in color.
button.btn {
color: white;
background-color: red;
padding: 10px 20px;
line-height: 1;
border: none;
transform: skewX(-25deg);
cursor: pointer;
}
button.btn span {
display: block;
transform: skewX(25deg);
}
<button class="btn" ><span>View Demo</span></button>
But I'm sure a lot of that will all have to change.

Here is a gradient solution that will work with any size:
button.btn {
color: white;
background:linear-gradient(to bottom right, #e80027 49%,#d20024 50%);
padding: 10px 20px;
line-height: 1;
border: none;
transform: skewX(-25deg);
cursor: pointer;
}
button.btn span {
display: block;
transform: skewX(25deg);
}
<button class="btn" ><span>View Demo</span></button>
<button class="btn" ><span>View Demo Demoooo</span></button>
<button class="btn" ><span>View </span></button>

Use Gradient CSS generator to get any sort of gradient backgrounds..
button.btn {
color: white;
background: rgba(248, 80, 50, 1);
background: -moz-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(248, 80, 50, 1)), color-stop(50%, rgba(241, 111, 92, 1)), color-stop(51%, rgba(246, 41, 12, 1)), color-stop(71%, rgba(240, 47, 23, 1)), color-stop(100%, rgba(231, 56, 39, 1)));
background: -webkit-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
background: -o-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
background: -ms-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
background: linear-gradient(135deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=1);
padding: 10px 20px;
line-height: 1;
border: none;
transform: skewX(-25deg);
cursor: pointer;
}
button.btn span {
display: block;
transform: skewX(25deg);
}
<button class="btn"><span>View Demo</span></button>

Try this:
.btn{
background-color: #34ADFF;
background-image: -webkit-linear-gradient(-68deg, #e80027 50%, #d20024 50%);
border:0px;
padding:20px 25px;
font-size:17px;
-webkit-transform:skew(-30deg);
-moz-transform:skew(-30deg);
-o-transform:skew(-30deg);
transform:skew(-30deg);
color:#fff;
margin-left:20px;
}
<button class="btn" ><span>View Demo</span></button>

button.btn {
color: white;
background-color: red;
padding: 10px 20px;
line-height: 1;
border: none;
transform: skewX(-25deg);
cursor: pointer;
background: linear-gradient(165deg, rgba(245, 80, 50, 1) 0%, rgba(245, 111, 92, 1) 50%, rgba(230, 41, 12, 1) 51%, rgba(230, 47, 23, 1) 71%, rgba(230, 56, 39, 1) 100%);
}
button.btn span {
display: block;
transform: skewX(25deg);
}
<button class="btn" ><span>View Demo</span></button>

CSS Border Colour Into 4 Colours

Is there any way that I can have 4 different colours on one side of a border in CSS? I currently have
#header
{
border-color:#88a9eb;
}
I want to have a border of 4 solid colours, with a 25% split on each, Is this something that is possible?
I want to make a solid version of this without the white bits in between.

You can use the border-image property to create a gradient border with 4 colors. Normally gradients move gradually from one color to another and it produces a blur like effect but setting the color-stops (the percentage values) such that the end-point of one color is same as the starting point of the next color makes the colors come to a hard stop and thus end up producing block like effects.
The border can be set to the required side by changing the border-image-width and the direction of the gradient. For example, top & bottom borders would need the gradient to go from left to right while left & right borders would need the gradient to go from top to bottom.
The gradients use percentage values for the size (and color-stop) and hence they are responsive by default and can adapt automatically even if the container's dimensions change.
The only drawback to using border-image is the poor browser support for this property at present. IE10- do not support this property.
.bordered-top {
border-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
border-image-slice: 1;
border-image-width: 4px 0px 0px 0px;
}
.bordered-bottom {
border-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
border-image-slice: 1;
border-image-width: 0px 0px 4px 0px;
}
.bordered-left {
border-image: linear-gradient(to bottom, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
border-image-slice: 1;
border-image-width: 0px 0px 0px 4px;
}
.bordered-right {
border-image: linear-gradient(to bottom, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
border-image-slice: 1;
border-image-width: 0px 4px 0px 0px;
}
div {
height: 100px;
width: 300px;
padding: 10px;
background: beige;
margin: 10px;
}
<!-- library added only for old browser support -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='bordered-top'>Border only on top</div>
<div class='bordered-bottom'>Border only on bottom</div>
<div class='bordered-left'>Border only on left</div>
<div class='bordered-right'>Border only on right</div>
For IE10+ support, you could mimic the same behavior by using gradients for the background-image property instead of border-image like in the below snippet.
Unlike with border-image, here the side on which the border is applied cannot be controlled using the border-image-width and we have to use background-position instead to position the image at the required position.
The background-size determines the thickness of the border. For top & bottom borders, the size in x-axis should be 100% and that in y-axis is the thickness of the border. For left & right borders, the size in y-axis should be 100% and that in x-axis is the thickness of the border.
.bordered-top {
background-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
background-size: 100% 4px;
background-repeat: no-repeat;
background-position: 0% 0%;
}
.bordered-bottom {
background-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
background-size: 100% 4px;
background-repeat: no-repeat;
background-position: 0% 100%;
}
.bordered-left {
background-image: linear-gradient(to bottom, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
background-size: 4px 100%;
background-repeat: no-repeat;
background-position: 0% 0%;
}
.bordered-right {
background-image: linear-gradient(to bottom, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
background-size: 4px 100%;
background-repeat: no-repeat;
background-position: 100% 0%;
}
div {
height: 100px;
width: 300px;
padding: 10px;
background: beige;
margin: 10px;
}
<!-- library added only for old browser support -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='bordered-top'>Border only on top</div>
<div class='bordered-bottom'>Border only on bottom</div>
<div class='bordered-left'>Border only on left</div>
<div class='bordered-right'>Border only on right</div>

You can use box-shadow and after psuedo-element to do this
What I did:
I first created an :after element on the bottom, then added box-shadows horizontally with different colors
If you want to change the strength of the border simply give more height to the :after element
div {
width: 200px;
height: 100px;
position: relative;
background: grey;
}
div:after {
bottom: 0;
position: absolute;
content: "";
width: 50px;
height: 5px;
background: green;
box-shadow: 50px 0 0 0 red, 100px 0 0 0 orange, 150px 0 0 0 green;
}
<div></div>
Same thing on a larger div will be like this
div {
width: 500px;
height: 100px;
background: orange;
position: relative;
}
div:after {
bottom: 0;
position: absolute;
content: "";
width: 100px;
height: 5px;
background: green;
box-shadow: 100px 0 0 0 darkred, 200px 0 0 0 red, 300px 0 0 0 yellow, 400px 0 0 0 tomato;
}
<div></div>

I have taken what harry had and amended it to suit my needs. I now have:
border-image: linear-gradient(to right, #8CC63F 0%, #006F3B 25%, #ED1C24 25%, #9B1B1E 50%, #85CDEC 50%, #217EC2 75%, #FFC20E 75%, #F04E23 100%);
border-image-slice: 3;
border-image-width: 0px 0px 4px 0px;
border-image-repeat: round;
This is the best solution for my needs.

Complicated but cool solution: Use SVG (e.g. <svg> tag), add 4 paths, assign different stroke-dasharray and stroke-color attributes.
Simpler and still cool solution: Try border-image. (See Harry's answer)
Very simple solution if you just need one border: Create an image, but it as the background image, repeat it only on one axis, position it at the edge of the container, e.g. (for bottom border)
.container {
background-image: url(image.png);
background-repeat: repeat-x;
background-position: bottom left;
}

you can try this one:
.solid{
width: 300px;
border-image: linear-gradient(to right, red 25%, blue 25%, blue 50%, green 50%, green 75%, orange 75%);
border-image-slice: 4;
}
DEMO

Best solution is with linear-gradient. Definitely.
But someone who's the beginner in this could find this solution useful. By using 2-3-4 colors or even more, this is the right way to do them. Not the best solution for this question, but maybe someone while reading this wants to understand better how do the colors with borders work.
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: #0000ff;
}
p.two {
border-style: solid;
border-color: #ff0000 #0000ff;
}
p.three {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff;
}
p.four {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
</head>
<body>
<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
</body>
</html>

Gradient CSS arrow [duplicate]

This question already has answers here:
Make CSS3 triangle with linear gradient
(5 answers)
Closed 8 years ago.
How is it possible to make a CSS arrow as a gradient instead os a solid colour?
Here is my CSS"
.breadcrumbDivider .arrow-right {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid gold;
position: relative;
margin-left: 360px;
}
I tried using the CSS gradient background image gradient but it takes the border parameter but unsure how to overcome this?
Here is the gradient I am trying to use...
background-color: #c9bc9e;
background-image: -webkit-gradient(linear, left top, left bottom, from(#c9bc9e), to(#a89464));
background-image: -webkit-linear-gradient(top, #c9bc9e, #a89464);
background-image: -moz-linear-gradient(top, #c9bc9e, #a89464);
background-image: -ms-linear-gradient(top, #c9bc9e, #a89464);
background-image: -o-linear-gradient(top, #c9bc9e, #a89464);
background-image: linear-gradient(top, #c9bc9e,#a89464);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#c9bc9e', endColorStr='#a89464');

I've made this by 'cutting out' the arrow from a square div, instead of 'generating' an arrow. It even has a hover effect:
.arrow {
height: 200px;
width: 300px;
background: rgb(169, 3, 41);
background: -moz-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(169, 3, 41, 1)), color-stop(44%, rgba(143, 2, 34, 1)), color-stop(100%, rgba(109, 0, 25, 1)));
background: -webkit-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -o-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -ms-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: linear-gradient(to bottom, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#6d0019', GradientType=0);
position: relative;
overflow: hidden;
transition: all 0.8s;
}
.arrow:before {
content: "";
position: absolute;
top: 0;
width: 70%;
height: calc(100% - 80px);
border-top: 40px solid white;
border-bottom: 40px solid white;
z-index: 10;
}
.arrow:after {
content: "";
position: absolute;
right: 0;
border-top: 100px solid white;
border-bottom: 100px solid white;
border-left: 100px solid transparent;
z-index: 10;
}
.perc {
position: absolute;
top: 0;
width: 0%;
height: 100%;
background: rgb(30, 87, 153);
background: -moz-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30, 87, 153, 1)), color-stop(50%, rgba(41, 137, 216, 1)), color-stop(51%, rgba(32, 124, 202, 1)), color-stop(100%, rgba(125, 185, 232, 1)));
background: -webkit-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
background: -o-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
background: -ms-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
background: linear-gradient(to bottom, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
z-index: 5;
transition: all 0.8s;
}
.arrow:hover .perc {
width: 100%;
}
<div class="arrow">
<div class="perc"></div>
</div>
Note
Originally designed for a progress bar, but hover effect can be removed if necessary.
Is suitable for a block coloured background only
So, if I cut the 'fancy stuff' and show you how it works:
Hover the one below to see the magic:
.arrow {
height: 200px;
width: 300px;
background: rgb(169, 3, 41);
background: -moz-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(169, 3, 41, 1)), color-stop(44%, rgba(143, 2, 34, 1)), color-stop(100%, rgba(109, 0, 25, 1)));
background: -webkit-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -o-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -ms-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: linear-gradient(to bottom, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#6d0019', GradientType=0);
position: relative;
overflow: hidden;
transition: all 0.8s;
}
.arrow:before {
content: "";
position: absolute;
top: 0;
width: 100%;
height: calc(100% - 80px);
border-top: 40px solid white;
border-bottom: 40px solid white;
z-index: 10;
}
.arrow:after {
content: "";
position: absolute;
right: 0px;
border-top: 100px solid white;
border-bottom: 100px solid white;
border-left: 100px solid transparent;
z-index: 10;
}
.arrow:hover:before {
border-top: 40px solid tomato;
border-bottom: 40px solid tomato;
}
.arrow:hover:after {
border-top: 100px solid yellow;
border-bottom: 100px solid blue;
}
<div class="arrow"></div>

Increase menu width to page size

I'm trying to create a menu which stretches across the page. However, it's not stretching across the screen, even when I make the width 100%.
Here's my code:
select {
display: none;
}
nav {
margin: 0 auto;
text-align: center;
background: #fff;
height: 70px;
width: 100%;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;
background: rgba(148, 148, 149, 1);
background: -moz-linear-gradient(top, rgba(148, 148, 149, 1) 0%, rgba(192, 192, 192, 1) 36%, rgba(192, 192, 192, 1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(148, 148, 149, 1)), color-stop(36%, rgba(192, 192, 192, 1)), color-stop(100%, rgba(192, 192, 192, 1)));
background: -webkit-linear-gradient(top, rgba(148, 148, 149, 1) 0%, rgba(192, 192, 192, 1) 36%, rgba(192, 192, 192, 1) 100%);
background: -o-linear-gradient(top, rgba(148, 148, 149, 1) 0%, rgba(192, 192, 192, 1) 36%, rgba(192, 192, 192, 1) 100%);
background: -ms-linear-gradient(top, rgba(148, 148, 149, 1) 0%, rgba(192, 192, 192, 1) 36%, rgba(192, 192, 192, 1) 100%);
background: linear-gradient(to bottom, rgba(148, 148, 149, 1) 0%, rgba(192, 192, 192, 1) 36%, rgba(192, 192, 192, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#949495', endColorstr='#c0c0c0', GradientType=0);
}
nav ul li {
float: left;
margin: 0;
padding: 0;
}
nav ul li a {
display: block;
padding: 10px 7px;
color: #000;
text-decoration: none;
}
nav ul li~li {
border-left: 1px solid #857D7A;
}
nav .active a {
background: rgba(180, 85, 12, 1);
background: -moz-linear-gradient(top, rgba(180, 85, 12, 1) 0%, rgba(234, 110, 16, 1) 36%, rgba(234, 110, 16, 1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(180, 85, 12, 1)), color-stop(36%, rgba(234, 110, 16, 1)), color-stop(100%, rgba(234, 110, 16, 1)));
background: -webkit-linear-gradient(top, rgba(180, 85, 12, 1) 0%, rgba(234, 110, 16, 1) 36%, rgba(234, 110, 16, 1) 100%);
background: -o-linear-gradient(top, rgba(180, 85, 12, 1) 0%, rgba(234, 110, 16, 1) 36%, rgba(234, 110, 16, 1) 100%);
background: -ms-linear-gradient(top, rgba(180, 85, 12, 1) 0%, rgba(234, 110, 16, 1) 36%, rgba(234, 110, 16, 1) 100%);
background: linear-gradient(to bottom, rgba(180, 85, 12, 1) 0%, rgba(234, 110, 16, 1) 36%, rgba(234, 110, 16, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#b4550c', endColorstr='#ea6e10', GradientType=0);
color: #fff;
}
#media (max-width: 480px) {
select {
display: block;
width: 200px;
margin: 0 auto;
}
nav {
display: none;
}
}
<nav>
<ul>
<li class="active">Item 1
</li>
<li>Item 2
</li>
<li>Item 3
</li>
<li>Item 4
</li>
<li>Item 5
</li>
</ul>
</nav>
<select>
<option value="#">Item 1</option>
<option value="#">Item 2</option>
<option value="#">Item 3</option>
<option value="#">Item 4</option>
<option value="#">Item 5</option>
</select>

You just need to add width: 100%; to your nav ul like this:
nav ul {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;
background: rgba(148,148,149,1);
background: -moz-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(148,148,149,1)), color-stop(36%, rgba(192,192,192,1)), color-stop(100%, rgba(192,192,192,1)));
background: -webkit-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: -o-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: -ms-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: linear-gradient(to bottom, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#949495', endColorstr='#c0c0c0', GradientType=0 );
}
If you want the buttons to expand, you need to use display: table; on the nav ul followed by display: table-cell; on the nav ul li
Here is a fiddle for you showing it working - http://jsfiddle.net/andyjh07/Ldu3o1jm/

Check this Codepan. You need to change this.
nav ul
{
width:100%
}