【问题标题】：i cant get a shape with polygon transform我无法通过多边形变换获得形状
【发布时间】：2020-08-06 03:53:01
【问题描述】：
我在为 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>
我需要这样的东西
【问题讨论】：
标签：
css
css-shapes
clip-path
【解决方案1】：
您正在寻找倾斜变换而不是剪辑路径：
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); /* you can try postive value */
transform-origin:top; /* use bottom with positive 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>