mini云码-wechatmini.com-用css实现各种形状

用css实现五角星

                
.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>