用css绘制形状

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

，但是当我试图得到确切的形状，它看起来像下面这样（运行段）

我不是在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

来源

2016-11-10 Alex Davies

您可以只创建在左上角一个白色的小矩形，扭曲它，继续前进它稍微向左移除绿色三角形：

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

来源

2016-11-10 08:51:15 Randy

兰迪如果我想的图像等元素添加了'div'里面'draw class'和我d不想让该元素偏斜，我该如何将绘图应用于背景，然后像菜单这样的元素现在可以放置在其中。 –

您可以使'.green'元素的位置：relative和' .draw'元素'位置：绝对'。这样，如果向'.green'元素添加更多元素，它将完全忽略倾斜的'.draw'元素。 – Randy

虽然没有工作。再看看我的问题。我添加了一张关于我的最终结果是什么样子的图片。谢谢你的帮助。我很感激 –

尝试使用: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>

来源

2016-11-10 08:54:00

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

来源

2016-11-10 08:54:15

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

来源

2016-11-10 09:00:59 Icewine

用css绘制形状

回答

相关问题