I have a game that looks a bit like a game from 1980. And i have this dialog:
#firstPageText {
width: 300px;
min-height: 100px;
border: 2px solid;
padding: 1em;
margin: 0;
position: absolute;
bottom: 50px;
left: 50%;
-ms-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
font-family: 'Press Start 2P', cursive;
border-radius: 5px;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<p id="firstPageText">
This is a test text.
</p>
I wanted to add a border-radius to this dialog like the ones from pokemon:
Is there a way to achieve this pixeled border-radius, instead of the rounded border-radius?
I would consider mulitiple background:
#firstPageText {
--b:5px; /* the thickness */
--c:#000; /* the color */
width: 300px;
min-height: 100px;
font-family: 'Press Start 2P', cursive;
padding:calc(5*var(--b));
position:relative;
}
#firstPageText::before,
#firstPageText::after {
content:"";
position:absolute;
inset:0 0 50% 0;
background:
linear-gradient(var(--c) 0 0) 50% 0 /calc(100% - 4*var(--b)) var(--b),
linear-gradient(var(--c) 0 0) 0% 100%/var(--b) calc(100% - 2*var(--b)),
linear-gradient(var(--c) 0 0) 100% 100%/var(--b) calc(100% - 2*var(--b)),
conic-gradient(from 90deg,var(--c) 90deg,#0000 0) 0 0/calc(2*var(--b)) calc(2*var(--b)),
conic-gradient(from 180deg,var(--c) 90deg,#0000 0) 100% 0/calc(2*var(--b)) calc(2*var(--b));
background-repeat:no-repeat;
}
#firstPageText::after {
transform-origin:bottom;
transform:scaleY(-1);
}
<p id="firstPageText">
This is a test text.
</p>
Apply different colors to understand the puzzle:
#firstPageText {
--b:10px; /* adjust this */
width: 300px;
min-height: 100px;
font-family: 'Press Start 2P', cursive;
padding:calc(5*var(--b));
position:relative;
}
#firstPageText::before,
#firstPageText::after {
content:"";
position:absolute;
inset:0 0 50% 0;
background:
linear-gradient(red 0 0) 50% 0 /calc(100% - 4*var(--b)) var(--b),
linear-gradient(blue 0 0) 0% 100%/var(--b) calc(100% - 2*var(--b)),
linear-gradient(green 0 0) 100% 100%/var(--b) calc(100% - 2*var(--b)),
conic-gradient(from 90deg,orange 90deg,lightblue 0) 0 0/calc(2*var(--b)) calc(2*var(--b)),
conic-gradient(from 180deg,purple 90deg,lightblue 0) 100% 0/calc(2*var(--b)) calc(2*var(--b));
background-repeat:no-repeat;
}
#firstPageText::after {
transform-origin:bottom;
transform:scaleY(-1);
filter:hue-rotate(180deg);
}
<p id="firstPageText">
This is a test text.
</p>
of what i see i don't think that this is a normal border radius or even svg i think those are multiple elements desgined like this way
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
.box {
width: 230px;
min-height: 100px;
margin: 25px auto;
position: relative;
}
.top {
height: 10px;
background: #000;
width: 85%;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.right {
height: 65%;
background: #000;
width: 10px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
.bottom {
height: 10px;
background: #000;
width: 85%;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.left {
height: 65%;
background: #000;
width: 10px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
/* Squares */
.top:before {
content: "";
height: 80%;
background: #000;
width: 8px;
position: absolute;
right:0;
bottom: -40%;
z-index: 99;
transform: translate(85%, 50%)
}
.right:before {
content: "";
height: 8px;
background: #000;
width: 80%;
position: absolute;
right:0;
bottom: -40%;
z-index: 99;
transform: translate(-100%, -230%)
}
.bottom:before {
content: "";
height: 80%;
background: #000;
width: 8px;
position: absolute;
left:0;
bottom: -40%;
z-index: 99;
transform: translate(-90%, -170%)
}
.left:before {
content: "";
height: 8px;
background: #000;
width: 80%;
position: absolute;
right:0;
top: -40%;
z-index: 99;
transform: translate(100%, 230%)
}
</style>
</head>
<body>
<div class="box">
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
</div>
</body>
</html>
it's not a scalable box it's a box with static width and when change the width you will be need to handle squares to be computable with the new width
Related
I'm trying to create this icon using pure css & a single div
so far I've only managed to add 2 points like this:
:root {
--gear_radius: 5rem;
--gear_color: black;
--gear_thickness: 1.5rem;
--gear_pin_length: 1.5rem;
--gear_pin_gap: 1.5rem;
}
.gear {
margin: 5rem;
height: var(--gear_radius);
width: var(--gear_radius);
border-radius: 50%;
border: var(--gear_color) var(--gear_thickness) solid;
box-sizing: border-box;
position: relative;
}
.gear:before {
position: absolute;
content: "";
display: block;
height: var(--gear_pin_length);
width: var(--gear_thickness);
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
box-shadow: 0 calc(var(--gear_thickness) * 2) 0 0 black, 0 calc(var(--gear_thickness) * -2) 0 0 black;
}
.gear:after {
position: absolute;
content: "";
display: block;
height: var(--gear_pin_length);
width: var(--gear_thickness);
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
box-shadow: 0 calc(var(--gear_thickness) * 2) 0 0 black, 0 calc(var(--gear_thickness) * -2) 0 0 black;
}
<div class="gear"></div>
How do I add 2 more points at the top and bottom? I don't know what approach to take from here?
The original picture of a gear wheel has an angle to the sides of each tooth.
However, I notice that in your part-solution you aren't worried about that and have parallel edges.
Here's a snippet that puts in all 6 teeth with parallel edges.
It uses before and after pseudo elements which had stripes as background and are rotated. The main div also has a stripe for a background but additionally a radial gradient with white and black circles.
.cog {
width: 30vmin;
height: 30vmin;
position: relative;
background-image: radial-gradient(white 0 35%, black 35% 70%, transparent 70% 100%), linear-gradient(to right, black, black);
background-size: 70% 70%, 25% 100%;
}
.cog::before,
.cog::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, black, black);
background-size: 25% 100%;
z-index: -1;
}
.cog,
.cog::before,
.cog::after {
background-repeat: no-repeat;
background-position: center center;
transform-origin: center;
}
.cog::before {
transform: rotate(60deg);
}
.cog::after {
transform: rotate(120deg);
}
<div class="cog"></div>
Here's what it produces:
To get more sophisticated shape - such as the slope on the teeth, you could do more with gradients or just CSS clip-path (though by the time you've done this you probably might as well have created an SVG).
Well, of course SVG is better, but since your question is more of a challenge, here is my solution:
* {
margin: 0;
padding: 0;
}
.icon {
position: relative;
background: beige;
height: 160px;
width: 160px;
}
.wheel {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 32px;
height: 32px;
background: beige;
border-radius: 50%;
border: solid 24px brown;
}
.cog {
position: absolute;
width: 24px;
height: 120px;
border-radius: 6px;
background: brown;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.cog:nth-child(2) {
transform: rotate(45deg);
}
.cog:nth-child(3) {
transform: rotate(90deg)
}
.cog:nth-child(4) {
transform: rotate(135deg)
}
<div class="icon">
<div class="cogs">
<div class="cog"></div>
<div class="cog"></div>
<div class="cog"></div>
<div class="cog"></div>
</div>
<div class="wheel"></div>
<div>
This question already has answers here:
CSS Cut out circle from a rectangular shape
(3 answers)
Closed 1 year ago.
Can anyone help me with how to get the style like in the image attached below using background colour for a div? I tried adding using pseudo-classes before and after but doesn't seem to be coming through.
.card {
height: 190px;
background: #070B32;
width: 360px;
position: relative;
}
.card:before {
background: #070B32;
position: absolute;
content: "";
left: 0;
height: 50px;
border-radius: 50% 50% 0 0;
}
.card:after {
background: #070B32;
position: absolute;
content: "";
right: 0;
height: 50px;
border-radius: 50% 50% 0 0;
}
<div class="card">
</div>
Use width top values too to have semi-circles with a change in color
.card {
height: 190px;
background: #070B32;
width: 360px;
position: relative;
}
.card:before {
background: white;
position: absolute;
content: "";
left: 0;
top:35%;
width: 25px;
height: 50px;
border-radius: 0 150px 150px 0;
}
.card:after {
background: white;
position: absolute;
content: "";
right: 0;
top:35%;
width: 25px;
height: 50px;
border-radius: 150px 0 0 150px;
}
<div class="card">
</div>
Update:
div {
height: 150px;
margin: 5em 2em;
background: radial-gradient(circle at left center, transparent, transparent 30px, #070B32 30px, transparent), radial-gradient(circle at right center, transparent, transparent 30px, #070B32 30px, transparent);
border-radius: 8px;
position: relative;
width: 360px;
margin: auto;
}
body {
background-image: url(http://www.fillmurray.com/1000/1000);
background-size: cover;
}
<div>
</div>
you should use width: 50px, background-color: white;
and responsive vertical alignment:
top: 50%; transform: translateY(-50%);
.card {
height: 190px;
background: #070B32;
width: 360px;
position: relative;
}
.card:before {
background: #ffffff;
position: absolute;
content: "";
left: -25px;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
border-radius: 50%;
}
.card:after {
background: #ffffff;
position: absolute;
content: "";
right: -25px;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
border-radius: 50%;
}
<div class="card">
</div>
Or just use a background.
.card {
--circle-color: #fff;
--circle-size: 50px;
background: radial-gradient(farthest-side circle, var(--circle-color) 97%, transparent) calc(100% + (var(--circle-size) / 2)) 50% / var(--circle-size) var(--circle-size),
radial-gradient(farthest-side circle, var(--circle-color) 97%, transparent) calc(var(--circle-size) / -2) 50% / var(--circle-size) var(--circle-size),
#070B32;
background-repeat: no-repeat;
height: 190px;
width: 360px;
}
<div class="card">
</div>
I have a set of codes from the cube created using CSS.
However, how do I resize this into a bigger cube (for example, 200px)? I have tried but everytime I try doing it, it goes out of position..
.mainDiv {
position: relative;
width: 206px;
height: 190px;
margin: 0px auto;
margin-top: 100px;
}
.square {
width: 100px;
height: 100px;
background: #c52329;
border: solid 2px #FFF;
transform: skew(180deg, 210deg);
position: absolute;
top: 43px;
}
.square2 {
width: 100px;
height: 100px;
background: #c52329;
border: solid 2px #FFF;
transform: skew(180deg, 150deg);
position: absolute;
left: 102px;
top: 43px;
}
.square3 {
width: 114px;
height: 100px;
background: #c52329;
border: solid 2px #FFF;
transform: rotate(150deg) translate(-40px, -16px) skew(30deg, 0deg);
position: absolute;
left: 0px;
top: -32px;
}
<div class="mainDiv">
<div class="square"></div>
<div class="square2"></div>
<div class="square3"></div>
</div>
You may first adjust your code to make the shape easier by reducing the code and removing some fixed values then you only need to change the size of the main element to make the cube bigger or smaller:
* {
box-sizing:border-box;
}
.mainDiv {
position: relative;
width: 200px;
height: 100px;
margin: 120px auto 0;
font-size:0;
}
.mainDiv > * {
background: #c52329;
border: solid 2px #FFF;
}
.square,
.square2{
width: 50%;
height: 100%;
display:inline-block;
}
.square {
transform-origin:top left;
transform:skewY(30deg);
}
.square2 {
transform-origin:top right;
transform:skewY(-30deg);
}
.square3 {
width: calc(50% * 1.14);
height: 100%;
transform: rotate(-30deg) skewX(30deg);
position: absolute;
transform-origin:top left;
top:0;
}
<div class="mainDiv">
<div class="square"></div>
<div class="square2"></div>
<div class="square3"></div>
</div>
<div class="mainDiv" style="width:100px;height:50px;">
<div class="square"></div>
<div class="square2"></div>
<div class="square3"></div>
</div>
<div class="mainDiv" style="width:400px;height:200px;">
<div class="square"></div>
<div class="square2"></div>
<div class="square3"></div>
</div>
You can also reduce the code using pseudo-element and introduce CSS variable to control the size:
.mainDiv {
position: relative;
--d:50px;
width: calc(var(--d) * 1.73 * var(--s, 1)); /* x sqrt(3) */
height: calc(var(--d) * var(--s, 1));
margin: calc(var(--d) * var(--s, 1)) auto;
}
.mainDiv:before,
.mainDiv:after {
content: "";
width: 50%;
height: 100%;
background:
linear-gradient(#c52329,#c52329) center/calc(100% - 4px) calc(100% - 4px) no-repeat,
#fff;
display: inline-block;
}
.mainDiv:before {
transform-origin: top left;
transform: skewY(30deg);
}
.mainDiv:after {
transform-origin: top right;
transform: skewY(-30deg);
}
.mainDiv>div {
position: absolute;
width: calc(50% * 1.154); /* x (1/cos(30)) */
padding-top:50%;
transform: rotate(-30deg) skewX(30deg);
background:
linear-gradient(#c52329,#c52329) center/calc(100% - 4px) calc(100% - 4px) no-repeat,
#fff;
top: 0;
transform-origin: top left;
}
<div class="mainDiv" style="--s:0.5"><div></div></div>
<div class="mainDiv"><div></div></div>
<div class="mainDiv" style="--s:1.5"><div></div></div>
<div class="mainDiv" style="--s:2"><div></div></div>
<div class="mainDiv" style="--s:3"><div></div></div>
You can even reduce more the code by relying on some gradient as background to create one part of the shape and remove the inner div and you will only have one element at the end:
.mainDiv {
position: relative;
--d:50px;
width: calc(var(--d) * 1.73 * var(--s,1));
height: calc(var(--d) * var(--s,1));
margin: 0 auto calc(var(--d) * var(--s,1));
background:
linear-gradient(to bottom left,#c52329 47%,transparent 48.5%) bottom left,
linear-gradient(to bottom right,#c52329 47%,transparent 48.5%) bottom right,
linear-gradient(to top left,#c52329 47%,transparent 48.5%) top left,
linear-gradient(to top right,#c52329 47%,transparent 48.5%) top right;
background-size:50.5% 50.5%;
background-repeat:no-repeat;
}
.mainDiv:before,
.mainDiv:after{
content:"";
width:50%;
height: 100%;
background:
linear-gradient(#c52329,#c52329) center/calc(100% - 4px) calc(100% - 4px) no-repeat,
#fff;
display:inline-block;;
}
.mainDiv:before {
transform-origin:top left;
transform:skewY(30deg) translateY(50%);
}
.mainDiv:after {
transform-origin:top right;
transform:skewY(-30deg) translateY(50%);
}
<div class="mainDiv"></div>
<div class="mainDiv" style="--s:1.5"></div>
<div class="mainDiv" style="--s:2"></div>
<div class="mainDiv" style="--s:3"></div>
The easier solution is to scale main container up. You can try to play with values to achieve desired size and position.
.mainDiv {
position: relative;
width: 206px;
height: 190px;
margin: 0px auto;
margin-top: 100px;
transform: scale(2) translate(5px, 70px);
}
.square {
width: 100px;
height: 100px;
background: #c52329;
border: solid 2px #FFF;
transform: skew(180deg, 210deg);
position: absolute;
top: 43px;
}
.square2 {
width: 100px;
height: 100px;
background: #c52329;
border: solid 2px #FFF;
transform: skew(180deg, 150deg);
position: absolute;
left: 102px;
top: 43px;
}
.square3 {
width: 114px;
height: 100px;
background: #c52329;
border: solid 2px #FFF;
transform: rotate(150deg) translate(-40px, -16px) skew(30deg, 0deg);
position: absolute;
left: 0px;
top: -32px;
}
<div class="mainDiv">
<div class="square"></div>
<div class="square2"></div>
<div class="square3"></div>
</div>
I've created cut div from both let and right side with css and I want to set that half div on the image. But due to border-color:white the cut part is not coming transparent. I've tried to give the border-color:transparent but it does not work, instead it removes the cut portion... What should be the problem to make it transparent?
Here is my code:
.goldenstrip::after {
content: '';
position: absolute;
top: 0;
left: 0;
border-bottom: 106px solid white;
border-right: 40px solid #c1b07a;
width: 0;
bottom: 0;
}
.goldenstrip::before {
content: '';
position: absolute;
top: 0;
right: 0;
border-top: 106px solid white;
border-left: 40px solid #c1b07a;
width: 0;
bottom: 0;
}
.goldenstrip {
text-align: center !important;
display: block;
text-transform: uppercase;
background: #C1B07A;
color: white;
font-size: 24px;
margin: 0 auto;
padding: 38px 0px;
position: relative;
font-family: "Roboto Medium";z-index: 1;
top: 52px;
width: 90%;
}
.seminar_image img {
width: 100%;
}
<span class="goldenstrip">Hello world</span>
<div class="seminar_image"><img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" alt="" class=""></div>
Please use this css instead of your after and before css.
goldenstrip::after {
content: '';
position: absolute;
top: 0;
left: -22px;
width: 45px;
bottom: 0;
transform: skew(23deg);
background: #c1b07a;
}
.goldenstrip::before {
content: '';
position: absolute;
top: 0;
right: -22px;
width: 50px;
bottom: 0;
background: #c1b07a;
transform: skew(23deg);
}
Use transform property for a slanted edge div.
.goldenstrip::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #c1b07a;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(20deg);
-ms-transform: skew(20deg);
transform: skew(20deg);
z-index: -1;
}
.goldenstrip::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: #c1b07a;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 0 100%;
-webkit-transform: skew(20deg);
-ms-transform: skew(20deg);
transform: skew(20deg);
z-index: -1;
}
.goldenstrip {
text-align: center !important;
display: block;
text-transform: uppercase;
background: #C1B07A;
color: white;
font-size: 24px;
margin: 0 auto;
padding: 38px 0px;
position: relative;
font-family: "Roboto Medium";
z-index: 1;
top: 52px;
width: 90%;
}
.seminar_image img {
width: 100%;
}
<span class="goldenstrip">Hello world</span>
<div class="seminar_image"><img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" alt="" class=""></div>
Use linear-gradient and multiple background to create the shape and avoid any extra element:
.goldenstrip {
text-align: center !important;
display: block;
text-transform: uppercase;
color: white;
font-size: 24px;
margin: 0 auto;
padding: 38px 0px;
position: relative;
font-family: "Roboto Medium";
z-index: 1;
top: 52px;
width: 90%;
background:
linear-gradient(to top right, transparent 49%, #C1B07A 50%) left/ 30px 100% no-repeat,
linear-gradient(to bottom left, transparent 49%, #C1B07A 50%) right/ 30px 100% no-repeat,
linear-gradient(#C1B07A, #C1B07A) center/calc(100% - 60px) 100% no-repeat;
}
.seminar_image img {
width: 100%;
}
<span class="goldenstrip">Hello world</span>
<div class="seminar_image"><img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" alt="" class=""></div>
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>