html：
class="stepbox clearfix lhh40 mt40">
class="stepitem fl fs16 c_fff textc lhh40 active"
style="width: 382px;">
class="">1i>
class="c_fff typo_bold">買家申請售後span>
div>
class="stepitem fl fs16 c_fff textc lhh40"
style="width: 400px;">
class="">2i>
class="c_fff typo_bold">賣家處理退款申請span>
div>
class="stepitem fl fs16 c_fff textc lhh40"
style="width: 416px;">
class="">3i>
class="c_fff typo_bold">退款完畢span>
div>
div>
公共css：
*.fs16
.c_fff
.textc,.tc
.typo_bold
主要css：
.stepitem{
background: #bebebe;
box-sizing: border-box;
position: relative;
/* 為步驟數字新增樣式 */
.stepitem
i{width: 25
px;height: 25
px;display: inline-block;
border-radius: 50
%;background-color: #fff;
transform: scale
(0.8,0.8);
-ms-transform
:scale
(7deg
); /* ie 9 */
-moz-transform
:scale
(7deg
); /* firefox */
-webkit-transform
:scale
(7deg
); /* safari 和 chrome */
-o-transform
:scale
(7deg
); /* opera */
font-weight: bold;
color: #bebebe;
/* 為每個步驟末尾加灰色三角形和白色邊框 */
.stepitem
::after{
content: "";
border: 2
pxsolid #fff;
border-bottom: none;
border-left: none;
background-color: #bebebe;
height: 30
px;width: 27
px;position: absolute;
display: block;
top: 5
px;right: -15
px;z-index: 10;
transform:rotate
(45deg
);-ms-transform
:rotate
(45deg
); /* ie 9 */
-moz-transform
:rotate
(45deg
); /* firefox */
-webkit-transform
:rotate
(45deg
); /* safari 和 chrome */
-o-transform
:rotate
(45deg
); /* opera */
/* 當前步驟加綠色三角形和白色邊框 */
.stepbox
.active
:after {
background-color: #00d2c3;
content: "";
border: 2
pxsolid #fff;
border-bottom: none;
border-left: none;
height: 28
px;width: 27
px;position: absolute;
display: block;
top: 5
px;right: -15
px;z-index: 10;
transform:rotate
(45deg
);-ms-transform
:rotate
(45deg
); /* ie 9 */
-moz-transform
:rotate
(45deg
); /* firefox */
-webkit-transform
:rotate
(45deg
); /* safari 和 chrome */
-o-transform
:rotate
(45deg
); /* opera */
/* 當前步驟中的樣式修改 */
.stepbox
.active {
background-color: #00d2c3;
.stepbox
.active
i{color: #00d2c3;
/* 取消最後一項所有的after偽類 */
.stepitem
:last-child::after{
content: "";
border: none;
height: 0;
width: 0;
z-index: 11;
效果圖：
css3實現小三角
利用css3的新特性可以完成很多圖形的構建，下面演示如何利用border的特性構建乙個小三角。我們首先新建乙個div，給這個div設定class demo 然後給demo設定如下屬性 demo顯示效果是這樣的 可以看到四個不同顏色的三角形連在一起。我們只想要乙個，比如向上的紅色三角形，怎麼辦，那就是...
CSS3實現三角形
下面用css3分別實現向上 下 左 右的三角形 箭頭向上 arrow up 箭頭向下 arrow down 箭頭向左 arrow left 箭頭向右 好了原理我們了解了，那麼我們就實戰一下吧，來實現帶小三角形的div框。首先，寫出html hello，我出生了 hello，我出生了 hello，我出...
css3實現三角形指向的div
前言 設計首先建立乙個div，再通過 before或者 after在div前面或者後面新增乙個三角形，將這個三角形作為乙個塊級，這個三角形的位置是相對於這個div相互繫結的。html css div.main div.down div.down after 這個繫結的div必須要設定乙個positi...