CSS实现各种图形 -- 梯形，三角形，扇形，圆形，半圆有时候我们需要将标准的盒子装饰成为各种形状的盒子，如圆形、三角形

CSS实现各种图形 -- 梯形，三角形，扇形，圆形，半圆

有时候我们需要将标准的盒子装饰成为各种形状的盒子，如圆形、三角形、梯形、扇形等，此篇文章主要就是用来记录实现这些图形的note

标准的盒子

如果我们给一个盒子定义了宽和高，然后又给它的各个border定义不同的样式，我们看看效果是啥【其实其他的图形就是在此基础上来进行修改的】

	/* HTML CODE: 
    <div class="square">正方形</div>
    */
    
    /* CSS CODE */
   .square {
      width: 100px;
      height: 100px;
      border-top: 50px solid red;
      border-right: 50px solid green;
      border-bottom: 50px solid orangered;
      border-left: 50px solid blue;
    }

页面展示：

画梯形

展示分析：从这个展示图形中，我们可以看出边框呈现有梯形，所以画梯形就好办了，只需要将其他的边的border-color设置为transparent【透明】即可

  <style>
    .trapezoidal{
        width: 100px;
        height: 100px;
        border: 50px solid transparent;
        border-bottom-color: tomato;
    }
  </style>
    
  <div class="trapezoidal"></div>

如果我们要画三角形，我们可以尝试把上边的代码改成如下代码看看效果

/* HTML CODE: 
    <div class="square">正方形</div>
    */
    
    /* CSS CODE */
   .square {
      width: 0;
      height: 0;
      border-top: 50px solid red;
      border-right: 50px solid green;
      border-bottom: 50px solid orangered;
      border-left: 50px solid blue;
    }

页面展示：展示分析：可以看到这个形状中组成元素有三角形，所以我们可以将其他的三边的border-color设置为transparent，然后把另外一条边的border-color设置为非透明的颜色就可以实现三角形了

画三角形

/* HTML CODE
	<div class="triangle">三角形</div>
*/

/* CSS CODE */
.triangle {
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-bottom-color: purple;
}

页面展示

画扇形

我们只需要给三角形对应的元素加上border-radius即可实现圆角

/* HTML CODE
	<div class="sector">扇形</div>
*/

/* CSS CODE */
   .sector {
      width: 0;
      height: 0;
      border-radius: 50%;
      border: 50px solid transparent;
      border-bottom-color: red;
    }

图形展示

圆形

/* HTML CODE
	<div class="circle">圆形</div>
*/

/* CSS CODE */
   .circle {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: green;
    }

图形展示

半圆

/* HTML CODE
	<div class="half-circle">半圆</div>
*/

/* CSS CODE */
 .half-circle {
      width: 100px;
      height: 50px;
      background-color: blue;
      border-top-left-radius: 50px; 
      border-top-right-radius: 50px;
 }

展示效果