用css实现五角星
 https://www.wechatmini.com/comm/shape 
                
.star {
    width: 100px;
    height: 100px;
    background: #faea8b;
    -webkit-clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 37% 38%);
    clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 37% 38%);
}

html代码：

                
<div class="star" ></div>
假如你需要改变大小，你改变width和height就行了，其他的不需要修改。
用css实现左箭头
  
                
.leftArrow{
    width: 100px;
    height: 50px;
    background: #FF8000;
    -webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
    clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
}
用css实现右箭头
  
                
.rightArrow{
    width: 100px;
    height: 50px;
    background: #FF8000;
    -webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
    clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}
用css实现关闭按钮
  
                
.close{
    width: 100px;
    height: 100px;
    background: #ff0000;
    -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
用css实现加号
  
                
.plus{
    width: 100px;
    height: 100px;
    background: #40c381;
    -webkit-clip-path: polygon(0% 35%, 35% 35%, 35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%);
    clip-path: polygon(0% 35%, 35% 35%, 35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%);
}
用css实现减号
  
                
.sub{
    width: 100px;
    height: 100px;
    background: #40c381;
    -webkit-clip-path: polygon(0% 35%, 100% 35%,100% 65%,0% 65%);
    clip-path: polygon(0% 35%, 100% 35%,100% 65%,0% 65%);
}
用css实现三角形
  
                
.triangle {
    width: 100px;
    height: 80px;
    background-color: #ff8283;
    -webkit-clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}
其实实现的原理很简单，也就是这三个点的连线： 0% 100%, 50% 0%, 100% 100% ， 三角形的大小通过width和height控制，三角形的尖锐通过height和width的比例控制。因此你拿到这个代码后，你只需要调整width和height就行了。
用css实现箭头向右的三角形
  
                
.triangleRight {
    width: 80px;
    height: 100px;
    background-color: #ff8283;
    -webkit-clip-path: polygon(0% 0%, 100% 50%, 100% 0%);
    clip-path: polygon(0% 0%, 100% 50%, 100% 0%);
}
用css实现圆形
  
                
.circle{
    width:100px;
    height:100px;
    border-radius:50%;
    background:#ff8283;
}
用css实现菱形
  
                
.ling{
    width:100px;
    height:100px;
    background-color:#ff8283;
    -webkit-clip-path:polygon(0px 50%,50% 0px,100% 50%,50% 100%,0px 50%);
    clip-path:polygon(0px 50%,50% 0px,100% 50%,50% 100%,0px 50%);
}
用css实现圆球
  
                
.qiu {
    display: block;
    background: #c83253;
    border-radius: 100%;
    height: 100px;
    width: 100px;
    margin: 0;
    background: radial-gradient(circle at 33% 33%, #f0bfca, #c83253);
}
其中#c83253要选择深色的颜色，#f0bfca要选择浅色的颜色，起到反光的效果。通过替换这两种颜色，就可以制造你需要的球型。
用css实现步骤形状一
第一步
第二步
第三步
第四步 
                
.step1{
    width: 180px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    -webkit-clip-path:polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%, 7% 50%);
    clip-path:polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%, 7% 50%);
    background: #FF8000;
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.5));
}

.step1Dis{
    width: 180px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    -webkit-clip-path:polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%, 7% 50%);
    clip-path:polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%, 7% 50%);
    background: #989898;
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.5));
}

html代码：

                
<div style="display: flex">
    <div class="step1">第一步</div>
    <div class="step1Dis">第二步</div>
    <div class="step1Dis">第三步</div>
    <div class="step1Dis">第四步</div>
</div>
用css实现步骤形状二
第一步
第二步
第三步
第四步 
                
.step2{
    width: 180px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    vertical-align: middle;
    color: #ffffff;
    -webkit-clip-path:polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%, 0% 50%);
    clip-path:polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%, 0% 50%);
    background: #40c381;
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.5));
}

.step2Dis{
    width: 180px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    vertical-align: middle;
    color: #ffffff;
    -webkit-clip-path:polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%, 0% 50%);
    clip-path:polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%, 0% 50%);
    background: #989898;
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.5));
}

html代码：

                
<div style="display: flex">
    <div class="step2" >第一步</div>
    <div class="step2Dis" style="margin-left: 10px">第二步</div>
    <div class="step2Dis" style="margin-left: 10px">第三步</div>
    <div class="step2Dis" style="margin-left: 10px">第四步</div>
</div>

原文地址：http://www.cnblogs.com/shaozhu520/p/16889371.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性