I can't do the task: center the text from the data-sentence attribute
After hovering over the picture (centered horizontally): https://jsfiddle.net/m59azhn8/1/
[data-sentence] {
position: relative;
}
[data-sentence]::after {
content: attr(data-sentence);
text-align: center;
padding: 5px;
font-size: 17px;
background: #333;
color: #fff;
z-index: 1000;
display: none;
position: absolute;
top: calc(100% - 55px);
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
left: 50%;
right: 0;
min-width: 245px;
min-height: 50px;
transform: translate(-50%, 0);
}
[data-sentence]:hover::after {
display: block;
}
[data-sentence='']::after {
display: none !important;
}
Here is a simple solution with flex-box. Hope this helps. New https://jsfiddle.net/m59azhn8/2/
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link rel="stylesheet" media="all" href="./css/all.css">
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="./js/all.js"></script>
<style>
body {
text-align: center;
margin: 0;
padding: 0;
}
.characters {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
ul li {
list-style-type: none;
display: inline;
}
input#checkbox_yoda + label {
background: url("https://image.ibb.co/fqqbDn/yoda.png") no-repeat;
background-size: 100%;
height: 250px;
width: 250px;
display:inline-block;
}
input#checkbox_trooper + label {
background: url("https://image.ibb.co/jBdk67/trooper.png") no-repeat;
background-size: 100%;
height: 250px;
width: 250px;
display:inline-block;
}
input#checkbox_vader + label {
background: url("https://image.ibb.co/chLbDn/vader.png") no-repeat;
background-size: 100%;
height: 250px;
width: 250px;
display:inline-block;
}
label[for=checkbox_yoda] {
border: 3px solid white;
border-radius: 20px;
color: transparent;
}
label[for=checkbox_trooper] {
border: 3px solid white;
border-radius: 20px;
color: transparent;
}
label[for=checkbox_vader] {
border: 3px solid white;
border-radius: 20px;
color: transparent;
}
input:hover + label {
border: 3px solid black;
border-radius: 20px;
cursor: pointer;
}
input:checked + label {
border: 3px solid black;
border-radius: 20px;
cursor: pointer;
}
input[type=checkbox] {
display: none;
}
[data-sentence] {
position: relative;
}
[data-sentence]::after {
content: attr(data-sentence);
text-align: center;
vertical-align: middle;
padding: 5px;
font-size: 17px;
background: #333;
color: #fff;
z-index: 1000;
display:none;
align-items:center;
justify-content:center;
position: absolute;
top: calc(100% - 55px);
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
left: 50%;
right: 0;
bottom: 0;
min-width: 245px;
min-height: 50px;
transform: translate(-50%, 0);
}
[data-sentence]:hover::after {
display: flex;
}
[data-sentence='']::after {
display: none !important;
}
</style>
</head>
<body>
<section class="characters">
<form action="#" method="get">
<input type="hidden" name="v" value="dQw4w9WgXcQ">
<ul>
<li>
<input id="checkbox_yoda" type="checkbox" name="character" value="light_side">
<label for="checkbox_yoda" data-sentence="Force is strong in you">Yoda</label>
</li>
<li>
<input id="checkbox_trooper" type="checkbox" name="character" value="dark_side">
<label for="checkbox_trooper" data-sentence="Just chillin'">Trooper</label>
</li>
<li>
<input id="checkbox_vader" type="checkbox" name="character" value="dark_side">
<label for="checkbox_vader" data-sentence="There is no escape from the Dark Side.">Vader</label>
</li>
</ul>
<button type="submit">Turn to the dark side</button>
</form>
</section>
</body>
</html>
Related
Recently I started creating a HUD for my server and I am stuck to the point I don't know what to do anymore, I am not that experienced with CSS but I've got some knowledge.
I am trying to make this kind of circle
View it on here
.circle {
position: relative;
border-radius: 50%;
width: 40px;
height: 40px;
box-sizing: border-box;
border-width: 22px;
border-style: solid;
border-color: #4a4a4c #4a4a4c00 #4a4a4c #4a4a4c;
transform: rotate(25deg);
}
.wide {
width: 200px;
height: 200px;
}
<div class="circle wide"></div>
I attempted creating it with this code, it's close but not really.
Highlights
position: absolute; and transform: translate to move tags around
outline-offset is that orange line in the middle
the icons are Unicode characters
the panel is a <form> with 2 <button>s and a <meter>
It not great but you can't expect anything good without any SVG or images (too much work).
.circle {
position: relative;
border-radius: 50%;
width: 40px;
height: 40px;
box-sizing: border-box;
border-width: 22px;
border-style: solid;
border-color: #4a4a4c #4a4a4c00 #4a4a4c #4a4a4c;
outline: solid 6px orange;
outline-offset: -14px;
transform: rotate(0deg);
}
.wide {
width: 200px;
height: 200px;
}
.panel {
display: inline-block;
position: absolute;
top: -8px;
right: -8px;
width: 7rem;
padding: 0 6px 6px 6px;
border-radius: 12px;
transform: rotate(90deg) translateY(-240%);
transform-origin: left center;
background: #333;
}
.panel b {
display: inline-block;
transform: rotate(-90deg);
margin-right: 8px;
}
button {
width: 30%;
padding: 0;
border: 0.5px;
border-radius: 4px;
background: rgba(51,51,51,0.3);
cursor: pointer;
}
button:hover {
background: gold;
}
.power {
width: 70%;
transform: rotate(-180deg);
}
.view {
position: absolute;
top: 6px;
left: 18px;
font-family: 'Segoe UI';
font-size: 5.5rem;
color: #aaa;
}
<div class="circle wide">
<output class='view'>85</output>
<form class='panel'>
<label><b>⛽</b><meter class='power' value="6" min="0" max="10"></meter></label><br>
<button class='btn' type='button'>🔆</button>
<button class='btn' type='reset'>🔁</button>
<button class='btn' type='submit'>🛰️</button>
</form>
</div>
I have been trying to build the following design using html/css:
So far I have been able to achieve the following:
but now I'm stuck and have not made progress since the last 2 days - so I am looking for help!
Also, is it possible to make this responsive?
To achieve the above I have written the following code:
.contain {
position: absolute;
height: 400px;
width: 700px;
left: 5%;
}
.hex {
position: absolute;
width: 125px;
height: 200px;
border-radius: 25px;
background: green;
}
.hex:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
border-radius: 25px;
transform: rotate(60deg);
background: green;
}
.hex:after {
position: absolute;
content: '';
width: 100%;
height: 100%;
border-radius: 25px;
transform: rotate(-60deg);
background: green;
}
.innerHexagon {
width: 100px;
height: 152px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: green;
border-top: 2px solid white;
border-bottom: 2px solid white;
border-radius: 20px;
}
.innerHexagon:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
transform: rotate(60deg);
background: green;
border-radius: 20px;
border-top: 2px solid white;
border-bottom: 2px solid white;
}
.innerHexagon:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
transform: rotate(-60deg);
background: green;
border-radius: 20px;
border-top: 2px solid white;
border-bottom: 2px solid white;
}
.test {
position: absolute;
width: 1600px;
/*width: 400px;*/
height: 200px;
z-index: -1;
border-right: 0px;
background: grey;
border-radius: 30px;
}
.test:before {
position: absolute;
content: '';
width: 140px;
/*width: 35%;*/
height: 100%;
transform: rotate(60deg);
left: 1460px;
/*left: 260px;*/
border-radius: 30px;
background: grey;
}
.test:after {
position: absolute;
content: '';
width: 140px;
/*width: 35%;*/
height: 100%;
transform: rotate(-60deg);
left: 1460px;
/*left: 260px;*/
border-radius: 30px;
background: grey;
}
.text {
padding-top: 25px;
padding-left: 50px;
font-size: xx-large;
font-family: sans-serif;
color: Black;
position: absolute;
width: 100%;
text-align: center;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<div class="contain">
<div class="hex">
<div class="innerHexagon" style="z-index:1">
</div>
</div>
<div class="test">
</div>
<div class="hex" style="left: 500px">
<div class="innerHexagon" style="z-index:1">
</div>
</div>
<div class="hex" style="left: 1000px">
<div class="innerHexagon" style="z-index:1">
</div>
</div>
</div>
</body>
</html>
I was able to come up with this solution for those white strips. I have added span element inside .hex div for the purpose and added styles at the end of your original styles. As for the responsive part, you need to elaborate the details on how you want the design to behave on different screens so we may be able to help that way.
.contain {
position: absolute;
height: 400px;
width: 700px;
left: 5%;
}
.hex {
position: absolute;
width: 125px;
height: 200px;
border-radius: 25px;
background: green;
}
.hex:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
border-radius: 25px;
transform: rotate(60deg);
background: green;
}
.hex:after {
position: absolute;
content: '';
width: 100%;
height: 100%;
border-radius: 25px;
transform: rotate(-60deg);
background: green;
}
.innerHexagon {
width: 100px;
height: 152px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: green;
border-top: 2px solid white;
border-bottom: 2px solid white;
border-radius: 20px;
}
.innerHexagon:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
transform: rotate(60deg);
background: green;
border-radius: 20px;
border-top: 2px solid white;
border-bottom: 2px solid white;
}
.innerHexagon:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
transform: rotate(-60deg);
background: green;
border-radius: 20px;
border-top: 2px solid white;
border-bottom: 2px solid white;
}
.test {
position: absolute;
width: 1600px;
/*width: 400px;*/
height: 200px;
z-index: -1;
border-right: 0px;
background: grey;
border-radius: 30px;
}
.test:before {
position: absolute;
content: '';
width: 140px;
/*width: 35%;*/
height: 100%;
transform: rotate(60deg);
left: 1460px;
/*left: 260px;*/
border-radius: 30px;
background: grey;
}
.test:after {
position: absolute;
content: '';
width: 140px;
/*width: 35%;*/
height: 100%;
transform: rotate(-60deg);
left: 1460px;
/*left: 260px;*/
border-radius: 30px;
background: grey;
}
.text {
padding-top: 25px;
padding-left: 50px;
font-size: xx-large;
font-family: sans-serif;
color: Black;
position: absolute;
width: 100%;
text-align: center;
z-index: 1;
}
/* new styles added */
.white-strip::after, .white-strip::before {
content: '';
height: 115px;
width: 50px;
background: transparent;
position: absolute;
border-right: 5px solid #ffffff;
left: -140px;
}
.white-strip::after {
bottom: 4px;
transform: rotate(25deg);
border-top-right-radius: 10px;
}
.white-strip::before {
top: 4px;
transform: rotate(-25deg);
border-bottom-right-radius: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="contain">
<div class="test"></div>
<div class="hex">
<div class="innerHexagon" style="z-index:1"></div>
</div>
<div class="hex" style="left: 500px">
<span class="white-strip"></span> <!-- added -->
<div class="innerHexagon" style="z-index:1"> </div>
</div>
<div class="hex" style="left: 1000px">
<span class="white-strip"></span> <!-- added -->
<div class="innerHexagon" style="z-index:1"></div>
</div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
Codepen
I just created a custom selection pop-up. Now inspecting it in other browsers, I can't avoid, but notice the little offset of the white "dot", inside the radio button, Firefox renders. Chrome and Edge will display it just fine, but Firefow won't. And rather out of curiosity I'd like to know, why's that? And how to avoid?
The "dot":
&::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
border-radius: 50%;
background-color: var(--light);
transform: translate(-50%, -50%);
}
Entire radio button:
input[type=radio] {
position: relative;
height: 24px;
width: 24px;
margin: 0;
border-radius: 50%;
border: solid 1px var(--light-contrast);
background-color: var(--light);
appearance: none;
cursor: pointer;
&:checked {
border-color: var(--accent);
background-color: var(--accent);
}
&:focus {
outline: 0;
}
&::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
border-radius: 50%;
background-color: var(--light);
transform: translate(-50%, -50%);
}
}
Whole snippet:
:root {
--dark: #212121;
--dark-contrast: #424242;
--light: #fafafa;
--light-contrast: #cfd8dc;
--accent: #2196f3;
}
*,
::after,
::before {
box-sizing: border-box;
}
html {
font-family: 'Roboto', sans-serif;
font-size: 1rem;
line-height: 1.5;
}
body {
display: grid;
place-items: center;
height: 100vh;
margin: 0;
background-color: var(--dark);
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
.select {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 300px;
background-color: var(--dark-contrast);
color: #fff;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.25);
cursor: pointer;
user-select: none;
padding: 1.25rem 1.5rem;
border-radius: 4px;
}
.select:focus {
outline: 0;
}
.select:focus .list {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
pointer-events: all;
}
.select:hover {
background-color: #484848;
}
.select::after {
display: inline-block;
content: '';
border-left: .3755rem solid transparent;
border-right: .3755rem solid transparent;
border-top: .375rem solid #fff;
}
.select .list {
position: fixed;
top: 50%;
left: 50%;
width: clamp(300px, 75vw, 320px);
border-radius: 4px;
background-color: var(--light);
color: #000;
transform: translate(-50%, -50%) scale(0);
transition: all 400ms ease;
opacity: 0;
pointer-events: none;
overflow: hidden;
}
.select .list label {
display: flex;
align-items: center;
padding: 1.25rem 1.5rem;
cursor: pointer;
}
.select .list label:hover {
background-color: #ededed;
}
.select .list label:active {
background-color: #e1e1e1;
transition: 200ms ease;
}
.select .list label input[type=radio] {
margin-right: 1rem;
}
input[type=radio] {
position: relative;
height: 24px;
width: 24px;
margin: 0;
border-radius: 50%;
border: solid 1px var(--light-contrast);
background-color: var(--light);
appearance: none;
cursor: pointer;
}
input[type=radio]:checked {
border-color: var(--accent);
background-color: var(--accent);
}
input[type=radio]:focus {
outline: 0;
}
input[type=radio]::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
border-radius: 50%;
background-color: var(--light);
transform: translate(-50%, -50%);
}
<div class="select" tabindex="1">
Select
<div class="list">
<label for="select-radio1">
<input type="radio" id="select-radio1" name="select-radio">
Chrome
</label>
<label for="select-radio2">
<input type="radio" id="select-radio2" name="select-radio">
Safari
</label>
<label for="select-radio3">
<input type="radio" id="select-radio3" name="select-radio">
Firefox
</label>
</div>
</div>
Subpixel rendering is handled differently across browsers.
As this SO-Post states:
[...] the problem arises from a different approach to subpixel calculus between browsers.
Also: there is no cross-browser solution, but only workarounds.
I've made custom checkbox, here is what i've made so far, but what I need is something like this, where there is also text and one image (not icon/fa-fa icon) in the center of the checkbox. Did u know how to achieve it? Here is the code from snippet:
div {
display: inline-block;
}
input[type="checkbox"][id^="cb"] {
display: none;
}
label {
display: block;
position: relative;
cursor: pointer;
height: 120px;
outline: 1px solid white;
width: 120px;
}
label:before {
background-color: red;
color: white;
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 1px;
left: 1px;
text-align: center;
line-height: 20px;
transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-ms-transition-duration: 0.4s;
}
label img {
height: 100%;
width: 100%;
}
:checked + label {
border-color: red;
}
:checked + label:before {
content: "✓";
background-color: red;
outline: 1px solid red;
z-index: 99;
}
:checked + label img {
z-index: -1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
height: 95%;
width: 95%;
outline: 3px solid red;
}
<div>
<div>
<input type="checkbox" id="cb1" />
<label for="cb1"><img src="http://lorempixel.com/103/103" /></label>
</div>
<div>
<input type="checkbox" id="cb2" />
<label for="cb2"><img src="http://lorempixel.com/102/102" /></label>
</div>
</div>
Thanks in advance for your help.
You're doing just fine at your own. Your code looks a bit complex because you can use the label as a block-element (like a div or a wrapper). Take a step back, look at your layout 'inside' the checkbox and see it as a normal layout/styling element. Nothing fancy.
.styled {
/* could also be a background */
background-color: red;
padding: 1rem 4rem;
text-align: center;
cursor: pointer;
}
span {
display: block;
font-size: 16px;
font-family: Arial;
margin-top: 10px;
}
label {
display: block;
max-width: 100px;
margin: 0 auto;
}
#checkbox {
display: none;
}
input:checked+label {
background-color: green;
}
<input id="checkbox" type="checkbox">
<label class="styled" for="checkbox">
<img src="https://placehold.it/20x20" alt="image 1">
<img src="https://placehold.it/40x40" alt="image 2">
<img src="https://placehold.it/60x60" alt="image 3">
<span>Text</span>
</label>
<div>
<div><input type="checkbox" id="cb1" />
<label for="cb1">
<img src="http://lorempixel.com/103/103" />
<img src="https://dummyimage.com/120/000000/ffffff" />
<span>Text</span>
</label>
</div>
<div><input type="checkbox" id="cb2" />
<label for="cb2">
<img src="http://lorempixel.com/102/102" />
<img src="https://dummyimage.com/120/000000/ffffff" />
<span>Text</span>
</label>
</div>
</div>
div {
display: inline-block;
}
input[type="checkbox"][id^="cb"] {
display: none;
}
label {
display: block;
position: relative;
cursor: pointer;
height: 120px;
outline: 1px solid white;
width: 120px;
}
label:before {
background-color: red;
color: white;
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 1px;
left: 1px;
text-align: center;
line-height: 20px;
transition-duration: 0.4s;
}
label img {
height: 100%;
width: 100%;
z-index: 1;
}
label img + img {
height: 60%;
width: 60%;
z-index: 2;
position: absolute;
top: 10%;
left: 20%;
}
span {
z-index: 2;
color: red;
position: absolute;
top: 75%;
left: 40%;
text-align: center;
}
:checked + label {
border-color: red;
}
:checked + label:before {
content: "✓";
background-color: red;
outline: 1px solid red;
z-index: 3;
}
:checked + label img + img {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
height: 60%;
width: 60%;
outline: 0px solid transparent;
}
:checked + label img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 98%;
width: 98%;
outline: 3px solid red;
}
Am trying to get a shape drawn in css on the header of my webpage. it supposed to look like this.
The shape am trying to draw for my header
but when I try to get the exact shape, IT looks like this below (Run the snippet)
Am not so good at css so am struggling here. The codes are below.
header {
padding: 0px !important;
height: auto !important;
}
.header {
top: 0px;
width: 100%;
height: auto !important;
padding: 0px !important;
background-color: #00ff00;
}
.spanheader {
font-size: 20px;
}
.logo {
z-index: 1;
position: relative;
}
.topheader {
text-align: center;
width: 100%;
background-color: lightgray;
left: 0px !important;
top: 0px !important;
}
#draw {
height: 30px;
width: 100%;
background-color: #fff;
}
#green {
height: 60px;
width: 100%;
border-width: 0px;
border-left: 280px solid white;
border-top: 20px solid white;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
<section id="header" class="header">
<div class="topheader">
<span class="spanheader f-700 c-gray">HEADER</span>
</div>
<div id="draw"></div>
<div id="green"></div>
</section>
What Am trying to achieve with my header and shape drawing
final look I want to achieve or what it should should look like at the end
You can just create a small white rectangle at the left top, skew it and move it a little to the left to remove the green triangle:
.green {
background-color:#0f0;
height:60px;
width:100%;
}
.draw {
height:30px;
margin-left:-15%;
width:30%;
background-color:#fff;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
<div class="green">
<div class="draw">
</div>
</div>
Try using :after. See this snippet.
header {
padding: 0px !important;
height: auto !important;
}
.header {
top: 0px;
width: 100%;
height: auto !important;
padding: 0px !important;
background-color: #00ff00;
}
.spanheader {
font-size: 20px;
}
.logo {
z-index: 1;
position: relative;
}
.topheader {
text-align: center;
width: 100%;
background-color: lightgray;
left: 0px !important;
top: 0px !important;
}
#draw {
height: 30px;
width: 100%;
background-color: #fff;
}
#green {
height: 60px;
width: 100%;
border-width: 0px;
position:relative;
}
#green:after{
content:'';
position:absolute;
top:0;
left:-25px;
height:30px;
width:250px;
background:white;
-moz-transform: skew(-60deg);
-webkit-transform: skew(-60deg);
transform: skew(-60deg);
}
<html>
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!-- Mirrored from byrushan.com/projects/ma/1-6-1/jquery/light/login.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 14 Jun 2016 14:12:13 GMT -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WEBPAGE </title>
</head>
<body>
<section id="header" class="header">
<div class="topheader">
<span class="spanheader f-700 c-gray">HEADER</span>
</div>
<div id="draw">
</div>
<div id="green"></div>
</section>
</body>
</html>
Take a look at this JSFiddle
header{
text-align:center;
padding: 5px 0;
background: grey;
color: white;
}
footer{
text-align: center;
padding: 50px 0;
position: relative;
}
footer::before,footer::after{
content: '';
display: inline-block;
width: 70%;
height: 50px;
background: green;
position: absolute;
bottom: 0;
right: -10px;
transform: skewX(-30deg);
}
footer::after{
width: 100%;
height: 30px;
transform: skewX(0);
}
#header {
width: 100%;
height: 30px;
background: #CCC;
text-align: center;
line-height: 30px;
}
#slashWrapper {
position: relative;
background: #FFF;
width: 100%;
height: 100px;
}
#whiteSlash {
height: 75px;
width: 300px;
background: #FFF;
position: absolute;
top: 0px;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
z-index: 2;
}
#greenSlash {
height: 50px;
width: 100%;
position: absolute;
bottom: 0px;
background: #00ff00;
}
#whiteSlashBottomCorner {
height: 25px;
width: 25px;
background: #FFF;
position: absolute;
bottom: 0px;
right: -25px;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
z-index: 2;
}
<div id="header">HEADER</div>
<div id="slashWrapper">
<div id="whiteSlash"></div>
<div id="greenSlash"></div>
<div id="whiteSlashBottomCorner">
</div>