カスタムシェイプの背景色は

Question

写真のように背景を作っていますが、画像はありません。私は「私たちについて」のリンク

Answer 1

にあなたが値skew()とCSS transform:を使用していることを達成することができます背景のような唯一の「背景色」としたいです。

* { 
 
    margin: 0 auto; 
 
    padding: 0; 
 
} 
 

 
ul { 
 
    display: block; 
 
    width: auto; 
 
    margin-top: 60px; 
 
    background-color: blue; 
 
    height: 45px; 
 
    font-family: calibri; 
 
    font-weight: bold; 
 
    text-align: center; 
 

 
} 
 

 

 
li { 
 
    display: inline-block; 
 
    line-height: 45px; 
 
    padding: 0 25px 0 25px; 
 
    background-color: orange; 
 
    font-size: 24px; 
 
    transform: skew(20deg); /* To Achieve the Slanted border */ 
 
    margin-right: -3px; 
 
} 
 

 
li a { 
 
    color: white; 
 
    display: block; 
 
    transform: skew(-20deg); /* To straighten up the text */ 
 
}

<ul> 
 

 
    <li><a href"#">About</a></li> 
 
    
 
    
 
</ul>

Click here for a full tutorial on how you can do that.

Answer 2

あなたは平行四辺形やひし形を探しているように見えます。これを行うには、transform: skew

#about { 
 
\t width: 120px; 
 
\t height: 20px; 
 
\t -webkit-transform: skew(20deg); 
 
\t -moz-transform: skew(20deg); 
 
\t  -o-transform: skew(20deg); 
 
\t background: blue; 
 
    color: white; 
 
    font-size: 20px; 
 
    padding-bottom: 5px; 
 
    text-align: center; 
 
    margin-left: 20px; 
 
}

<div id="about">About us</div>