Question

我试图在我的网页标题上绘制一个用css绘制的形状。它应该看起来像这样。 The shape am trying to draw for my header

但是当我尝试获得确切的形状时，IT如下所示（运行代码段）

我不太擅长css，所以我在这里挣扎。代码如下。

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>

我试图通过标题和形状绘图实现的目标

final look I want to achieve or what it should should look like at the end

Answer 1

您可以在左上方创建一个小的白色矩形，将其倾斜并向左移动一点以移除绿色三角形：

＆＃13;

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

＆＃13;

<div class="green">
  <div class="draw">
  </div>
</div>

＆＃13;

Answer 2

尝试使用:after。请参阅此片段。

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>

Answer 3

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

Answer 4

＆＃13;

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

＆＃13;

<div id="header">HEADER</div>
<div id="slashWrapper">
  <div id="whiteSlash"></div>
  <div id="greenSlash"></div>
  <div id="whiteSlashBottomCorner">
</div>

＆＃13;

用css绘制形状

4 个答案: