三角的四个方向可修改,根据:border-top-color:; border-bottom-color:; border-left-color:; border-right-color:;
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>三角形</title> <style> .icon-b { display: inline-block; width: 0px; height: 0px; border: 10px solid transparent; border-top-color: #2fa0ec; position: relative; left: 3px; top: 2px; } </style> </head> <body> <b class="icon-b"></b> </body> </html>
<
style
>
.semicircle {
display:
inline-block;
width:
18px;
height:
29px;
border-radius:
18px
0
0
18px;
/* 左上、右上、右下、左下 */
border:
1px
solid
#feb34a;
border-right:
#fff;
position:
relative;
top:
10px;
right:
-7px;
}
<
/
style
>
<
span
class=
"semicircle"
></
span
>
border-right设置右边线为白色;可改变为右图。
<
style
>
.collection a{
font-size:
14px;
padding:
9px
0
9px
10px;
color:
#feb34a;
text-decoration:
none;
border:
1px
solid
#feb34a;
border-top-left-radius:
22px;
border-bottom-left-radius:
22px;
border-right:
none;
}
.semic-text{
margin-right:
20px
}
<
/
style
>
<
div
class=
"collection"
>
<
a
><
span
class=
"semic-text"
>收藏
</
span
></
a
>
</
div
>