用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繪製形狀

回答

相關問題