CSS画出半圆，四分之一圆，三角等图形

圆形

.icon{
    width: 100px;
    height: 100px;
    background: red;
    border-radius: 50%;
  }

半圆

.icon{
    width: 100px;
    height: 50px;
    background: red;
    border-radius: 100px 100px 0 0;
  }

四分之一圆

.icon{
    width: 50px;
    height: 50px;
    background: red;
    border-radius: 100px 0 0 0;
  }

原理：圆，半圆，四分之一圆的实现主要是 border-radius 属性，设置不同方向的值
分别是 左上，右上，右下，左下

三角形

.icon{
    border: 50px solid red;
		width: 0;
		height: 0;
		border-color: red transparent transparent transparent
  }

原理：border设置大一点，相当于设置了一个矩形，通过border-color设置颜色，不需要的方向则设置 transparent，也可以设置多个方向来实现不同图形，四个方向都设置相当于矩形

	border-color: red blue yellow green;

标签：画出,100px,height,width,radius,red,半圆,border,CSS
来源： https://blog.csdn.net/hu104160112/article/details/111058550