CODEWITHSUNDEEP
htmlcss
Alex Davies
Alex Davies

Reputation: 25

drawing shapes with css

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

Upvotes: 1

Views: 757

Answers (4)

Icewine
Icewine

Reputation: 1851

#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>

Upvotes: 1

Ron.Basco
Ron.Basco

Reputation: 2446

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);
}

Upvotes: 1

Undecided Dev
Undecided Dev

Reputation: 830

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>

Upvotes: 1

Randy
Randy

Reputation: 9849

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>

Upvotes: 1

Related Questions