用于以下图像设计的CSS

Question

＆＃13;

＆＃13;

<div class="col-lg-3">
        <div class="step2">
            Step 1
        </div>
</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

我正在开发一个网站，但现在我不得不为下面的图片中给出的步骤部分（步骤1，步骤2，步骤3）实现css：   This is the link for the image

任何人都可以帮助我实现CSS吗？

Answer 1

使用它并根据您的需要调整大小和字体！

span{
  position: absolute;
  width : 100px;
  margin-left: 30%;
  margin-top: 40%;
}
.orange {
    vertical-align: middle;
    color: white;   
    position:relative;
    background-color:#333;
    height:100px !important;
    width:100px !important;
    z-index:3;
    border-bottom-left-radius: 50%;
    float: left;
    margin-right:2px;
}

.orange:after {
    content:'';
    position: absolute;
    left: 100%;
    width: 0;
    height: 0;
    border-top: solid 50px transparent;
    border-bottom: solid 50px transparent;
    border-left: solid 15px #333;
}

.green {
    color: white;
    position:relative;
    background-color: #333;
    height:100px !important;
    width:100px !important;
    z-index:2;
    margin-right:2px;
    float: left;
}

.green:after {
    content:'';
    position: absolute;
    left: 100%;
    width: 0;
    height: 0;
    border-top: solid 50px transparent;
    border-bottom: solid 50px transparent;
    border-left: solid 15px #333;
}
.green:before {
    content:'';
    position: absolute;
    width: 0;
    height: 0;
    border-top: solid 50px transparent;
    border-bottom: solid 50px transparent;
    border-left: solid 15px white;
}

.blue {
    color: white;
    position:relative;
    background-color: #333;
    height:100px !important;
    width:100px !important;
    border-top-right-radius: 50%;
    float: left;
}

.blue:after {
    content:'';
    position: absolute;
    top: 100%;
    left: 100%;
    margin-left: 250px;
    width: 0;
    height: 0;
}
.blue:before {
    content:'';
    position: absolute;
    width: 0;
    height: 0;
    border-top: solid 50px transparent;
    border-bottom: solid 50px transparent;
    border-left: solid 15px white;
}

<div class="orange"><span>Step 1</span></div>
<div class="green"><span>Step 2</span></div>
<div class="blue"><span>Step 3</span></div>