css自定义形状的背景颜色

Question

我想在照片中制作背景，但没有图像。我只想要＆＃34;背景颜色＆＃34;喜欢背景＆＃34;关于我们＆＃34;链路

Answer 1

您可以使用值为transform:;

的CSS 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 {
	width: 120px;
	height: 20px;
	-webkit-transform: skew(20deg);
	   -moz-transform: skew(20deg);
	     -o-transform: skew(20deg);
	background: blue;
    color: white;
    font-size: 20px;
    padding-bottom: 5px;
    text-align: center;
    margin-left: 20px;
}

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