利用css实现常见图形

1、正圆形

        给正方形盒子设置圆角属性为宽高的50%。

div {
  width: 100px;
  height: 100px;
  background-color: plum;
  border-radius: 50%;
}   

2、胶囊形

        给长方形盒子设置圆角属性为盒子高度的50%。

div {
  width: 200px;
  height: 100px;
  background-color: plum;
  border-radius: 50px;
} 

3、椭圆形

        给长方形盒子设置圆角属性为盒子宽高的50%。 

4、三角形

        苦熬高设置为0，再通过border进行设置即可，若只要下方三角形，将其他三边的border颜色设置为transprent即可。

div {
  width: 0;
  height: 0;
  border-top: 50px solid yellowgreen;
  border-bottom: 50px solid deeppink;
  border-left: 50px solid bisque;
  border-right: 50px solid chocolate;
}

div {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid deeppink;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

5、梯形

        在三角形的基础上设置宽度即可。

div {
  width: 50px;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid deeppink;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

6、菱形

        将正方形旋转45度，即可。 

div {
  height: 100px;
  width: 100px;
  transform: rotate(45deg);
  background-color: #ffaaff;
}

 

原文地址：https://blog.csdn.net/sinat_34896766/article/details/136396420

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！