亚洲视频二区_亚洲欧洲日本天天堂在线观看_日韩一区二区在线观看_中文字幕不卡一区

一提起圖標，大家可能第一個會想到PS、美工等詞語，但很多小圖標現(xiàn)在根本都不需要再打開PS了。

1、常見的括號（ 前進或后退“>” ）

.arrow{
  width:12rpx;
  height:12rpx; 
  border-top:1px solid #999;
  border-right:1px solid #999;
  transform:rotate(-45deg); 
  position:absolute; 
  right:10px; 
}

2、常見的關閉按鈕（ “X” ），這里需要用到一個偽類

.close {
        display: inline-block;
        width: 30px;
        height: 4px;
        background: #333;
        transform: rotate(45deg);
    }

    .close::after {
        content: '';
        display: block;
        width: 30px;
        height: 4px;
        background: #333;
        transform: rotate(-90deg);
    }

3、常見的勾選（ “√” ）

.check {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 25px;
    background: #333;
    border-radius: 25px;
}
.check::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 8px;
    width: 50%;
    height: 25%;
    border: 2px solid #fff;
    border-radius: 1px;
    border-top: none;
    border-right: none;
    background: transparent;
    transform: rotate(-45deg);
}

4、常見的加號（ “+” ），同樣需要利用偽類

.add {
  width: 100px;
  height: 100px;
  color: #ccc;
  transition: color .25s;
  position: relative;
}

 .add::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  margin-left: -40px;
  margin-top: -5px;
  border-top: 10px solid;
}

.add::after {
 content: '';
 position: absolute;
 left: 50%;
 top: 50%;
 height: 80px;
 margin-left: -5px;
 margin-top: -40px;
 border-left: 10px solid;
}

5、常見的波浪線（ “~” ），同樣需要利用偽類

.info::before {
content: '';
position: absolute;
top: 30px;
width: 100%;
height: 0.25em;

background:
 linear-gradient(
135deg, 
 transparent, 
 transparent 45%, 
 #008000, 
 transparent 55%, 
 transparent 100%
 ),
linear-gradient(
 45deg, 
 transparent, 
 transparent 45%, 
  #008000, 
 transparent 55%, 
 transparent 100%
);
background-size: 0.5em 0.5em;
background-repeat: repeat-x, repeat-x;
}

5、常見的三角形

.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

6、常見的扇形

.sector {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #f00;
border-radius: 50%;
}

7、仿微信對話框

.alertDialog {
/* 對話框：一個圓角矩形和一個小三角形 */
width: 150px;
height: 100px;
background: #f00;
border-radius: 10px;
position: relative;
}
.alertDialog:before {
content: "";
width: 0;
height: 0;
position: absolute;
left: -20px;
top: 40px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 20px solid #f00;
}

8、鉆石圖標

.diamond {
/* 鉆石：梯形和三角形組成 */
width: 50px;
height: 0;
position: relative;
border-bottom: 25px solid #f00;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
.diamond:before {
content: "";
width: 0;
height: 0;
position: absolute;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 70px solid #f00;
left: -25px;
top: 25px;
}

9、五角星圖標

.starFive {
 width: 0;
 height: 0;
 position: relative;
 border-left: 80px solid transparent;
 border-right: 80px solid transparent;
 border-bottom: 60px solid #f00;
 transform: rotate(35deg);
}
.starFive:before {
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 border-left: 80px solid transparent;
 border-right: 80px solid transparent;
 border-bottom: 60px solid #f00;
 transform: rotate(-70deg);
 top: 3px;
 left: -80px;
}
.starFive:after {
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 border-bottom: 60px solid #f00;
 border-right: 20px solid transparent;
 border-left: 20px solid transparent;
 transform: rotate(-35deg);
        top: -40px;
        left: -49px;
}

喜歡的可以加個關注，不定期發(fā)布更多css相關文章