目录
一：这里简单介绍一下将要用到的css属性
1.1 border-radius
1.1.1 作用
一个指定边框弯曲程度的属性，它的值可以是长度单位，也可以是百分比。当它的值为百分比的时候，代表的实际长度是使用该元素的标签长或者宽对应的长度百分比。border-radius的其它属性和border属性几乎没有差别，这里不再介绍。
1.1.2注意事项
当border-radius被拆开写为border-top-radius的时候，它的值其实可以由两个，会画出一个椭圆行的外边框出来，详情参考MDN.
1.2 clip属性
1.2.1示范
clip属性规定了一个被剪裁出来的可见区域,其用法参考下列表格
| clip:rect(top,right,bottom,left) | 这里的四个参数分别指将要显示的区域距离该元素的上右下左的边框的距离 |
1.2.1注意事项
clip属性已经被MDN废弃，建议尽量减少使用这种方法
二 形状设置
给出公共的html标签的body部分
<div class="box">
<div class="child_box_1"></div>
<div class="child_box_2"></div>
<div class="child_box_3"></div>
</div>
2.1：圆形
2.2.1代码展示
.box{
width: 200px;
height: 200px;
margin: 0 auto;
background-color: #000000;
border-radius: 50% 50% 50% 50%;
/* 为了与后边的元素做对比，这里把boeder-radius的四个参数展开写 */
}效果图如下，当边框的四个弯曲度被设置为长和宽的百分之五十的时候，该边框就会变成圆形
2.2 三角形
这里给出三种方法，并且给出对比
| 利用border属性 | 简单，推荐使用 |
| 利用线性渐变/linear-gradient | 该属性需要借助background-image属性实现 |
| 利用变形属性 | 原理上和border差不多 |
2.2.1：利用border的四个边框属性做出三角形
.box{
width:0px;
height: 0px;
margin: 0 auto;
border: 30px solid transparent;
border-top-color: red;
/* top right bottom left 分别生成对应的向下左上右的三角形 */
}
效果如下
2.2.2 利用渐变属性做出三角形
.box{
width:30px;
height:30px;
background-image: linear-gradient( to top left , red 0,red 50% ,
transparent 50%, transparent 100%);
}
通过控制渐变的方向控制三角型的方向，效果如下
2.2.3利用变形属性
代码如下
.box{
width:200px;
height:200px;
overflow: hidden;
border: 1px solid red;
display: flex;
align-items: flex-end;
}
.child_box{
width: 100px;
height: 100px;
background-color: red;
transform-origin: bottom left;
transform: rotate(45deg);
}效果如下
2.3：梯形
梯形本质上就是由两个三角形和一个矩形拼接出来的，这里给出一种实现方式不做过多叙述。
.box {
width: 200px;
height: 200px;
display: flex;
align-items: flex-end;
justify-content: center;
}
.box >div{
width: 50px;
height: 50px;
}
.child_box_1{
background-image: linear-gradient(to top left,red 0 , red 50%,
transparent 50%, transparent 100%);
}
.child_box_2{
background-color:red;
}
.child_box_3{
background-image: linear-gradient(to top right,red 0 , red 50%,
transparent 50%, transparent 100%);
}效果如下
2.4：扇形
这里给出一种简单的写法，利用border做一个60度的圆弧
.box {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
-background-color: red;
border-radius: 100%;
border: 1px solid red;
margin: 0 auto;
overflow: hidden;
}
.child_box_1 {
width: 0px;
height: 0px;
border: 10px solid transparent;
border-top-width: 30px;
border-bottom-width: 30px;
border-left-width: 30px;
border-right-width:30px;
border-radius: 100%;
border-top-color: red;
}效果如下
如果要做出不同角度的扇形，根据调正border四个边框的宽度即可，但是注意调正圆心的位置，即要始终把子盒子放在父盒子的中间位置
2.5.2这里给出另外一种比较灵活的切圆方法
转自