有时候我们需要将标准的盒子装饰成为各种形状的盒子，如圆形、三角形、梯形、扇形等，此篇文章主要就是用来记录实现这些图形的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;
}
展示效果
