我在为li制作形状时遇到问题,我需要它具有对角线和平滑的边框,但我无法理解。这就是我现在得到的。
ul {
list-style-type: none;
margin: 0;
padding: 0;
list-style-position: inside;
display:flex;
}
li {
position: relative;
height: 40px;
width: 300px;
margin: 10px;
padding-right: 30px;
line-height: 40px;
text-align: right;
text-transform: uppercase;
border-radius: 8px;
background: crimson;
color: white;
-webkit-clip-path: polygon(0% 0%, 0% 50%, 10% 100%, 100% 100%, 100% 50%, 90% 0%);
clip-path: polygon(0% 0%, 0% 50%, 10% 100%, 100% 100%, 100% 50%, 90% 0%);
}
<ul>
<li>Menu Text 1</li>
<li>Menu Text 2</li>
<li>Menu Text 3</li>
</ul>
我需要这样的东西
您正在寻找偏斜变换而不是剪切路径:
ul {
list-style-type: none;
margin: 0;
padding: 0;
list-style-position: inside;
display: flex;
}
li {
position: relative;
z-index: 0;
height: 40px;
padding:0 20px;
margin: 10px;
line-height: 40px;
text-align: right;
text-transform: uppercase;
color: white;
}
li::before {
content: "";
position: absolute;
z-index:-1;
top: 0;
left: 50%;
right: 0;
bottom: 0;
transform: skew(15deg); /* use negative value to have the other direction */
transform-origin:bottom; /* use top with negative value*/
border-radius: 0 8px 8px 0;
background: crimson;
}
li::after {
content: "";
position: absolute;
z-index:-1;
top: 0;
left: 0;
right: 50%;
bottom: 0;
border-radius: 8px 0 0 8px;
background: crimson;
}
<ul>
<li>Menu Text 1</li>
<li>Menu Text 2</li>
<li>Menu Text 3</li>
</ul>