css自定义形状的背景色

Question

我想使背景像照片一样，但没有图像。我想唯一的“背景色”就像在后台“关于我们”的链接

Answer 1

可以实现，使用CSS transform:与价值skew();

* { 
 
    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>