CSS画出三角形与圆形小技巧

CSS画出三角形与圆形小技巧

有时候或许想要一个小三角或一个圆形，手里又没有图标，可以利用CSS直接在页面中添加三角形或圆形

画三角形

    step1:宽高为零

    width:0px;

    height:0px;

    step2:设置边框颜色，尺寸，类型只能是solid实线哦

    border:颜色 尺寸 solid;

    step3:

    留下想要方向的边框

    其它3个方向color取值为transparent（透明色）

    border-方向-color:transparent;

 

下面为CSS代码和效果（html里面就两个空标签，最好用伪元素）

div{
    width: 0px;
    height: 0px;
    
    border: 50px red solid;
    /* 留下上边框不透明，三角形箭头向下 */
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent; 
}
aside {
    width: 0px;
    height: 0px;
    
    border: 10px purple solid;
/* 留下下边框不透明，三角箭头向上 */
    border-right-color: transparent;
    border-top-color: transparent;
    border-left-color: transparent; 
}

 

 大小颜色方向，自己选择。

画圆形

  step1:设置宽高相等，大小等于圆的直径

    width:100px;

    height:100px;

 

    step2:设置想要的背景色

    background-color: deeppink;

 

 

    step3:设置边框的圆角率为50%

    border-radius: 50%;

 

下面为CSS代码和效果（html里面就一个空标签，最好用伪元素）

section{
    width: 100px;
    height: 100px;
   
    background-color: deeppink;

    border-radius: 50%;
}