css设置圆，半圆，四分之一圆，三角形

1.css设置圆

css代码：

            /* 水平居中 */

            margin: 0 auto;

            /* 设置宽高 */

            width: 100px;

            height: 100px;

            /* 背景颜色 */

            background-color: pink;

            /* 设置圆角=宽高的一半=圆的半径 */

            border-radius: 50px;

 

 2.设置半圆

css代码：

           /* 设置水平居中 */

           margin: 20px auto;

           /* 设置宽高2：1 */

           width: 100px;

           height: 50px;

           /* 背景颜色 */

           background-color: greenyellow;

           /* 设置圆角=半圆的半径，需要哪边的半圆就把圆弧那边两个角设置圆角 */

           border-radius: 50px 50px 0 0;

 

3.设置四分之一圆

css代码：

          /* 设置水平居中 */

            margin: 100px auto;

            /* 设置宽高为1:1 */

           width: 100px;

           height: 100px;

           /* 背景颜色 */

          background-color: black;

          /* 设置四分之一圆只需要设置一个角=宽高 */

          border-radius: 100px 0 0 0;

 

 

4.用边框设置三角形

css代码：

           /* 设置水平居中 */

            margin: 100px auto;

            /* 设置宽高为0 */

           width: 0;

           height: 0;

           /* 设置边框宽度=三角形的高，颜色设置透明色 */

           border: 10px solid transparent;

           /* 上下左右想要哪个三角形就给它设置颜色 */

           border-bottom-color: #000;