CSS 画圆 三角形箭头

来源:互联网 发布:mac 拷贝文件夹 命令 编辑:程序博客网 时间:2024/05/16 11:44

圆:宽度 高度与border保持一致

.circle {
border: 2px solid #CCCCCC;
width: 20px;
height: 20px;

-webkit-border-radius: 20px;

-moz-border-radius: 20px;
border-radius: 20px;
}

三角箭头:

 <strong style="float:left; border-style:solid; border-width:10px; border-color:#000 #ccc #ccc #ccc; height:0; width:0; font-size:0"></strong>

通过设置border-color来达到想要的三角箭头的效果。  让其中一个颜色与其它颜色不同,可以调整三角箭头的指向。

或者:

.arrow-up {//向上的三角形
    width:0;
    height:0;    
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-bottom:8px solid #eeeeee;
}

0 0