AitSchool

形状

使用盒子绘制特殊图形，圆形和三角形事我们最常绘制的图像。

  • 三角形
  • 圆/椭圆形
  • 平行四边形

三角形

//向上三角形
width: 0;
height: 0;
border-bottom: 20px solid #fff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;

//向下三角形
width: 0;
height: 0;
border-top: 20px solid #fff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;

//向左三角形
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 20px solid #fff;

//向右三角形
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 20px solid #fff;

圆和椭圆

  • 圆
display: inline-block;
height: 200px;
width: 200px;
background: #fff;
border-radius: 50%;
  • 椭圆
display: inline-block;
height: 150px;
width: 200px;
background: #fff;
border-radius: 50%;
  • 二分一椭圆
display: inline-block;
height: 150px;
width: 200px;
background: #fff;
border-radius:100% 0 0 100% / 50%;
  • 四分一椭圆
display: inline-block;
height: 150px;
width: 200px;
background: #fff;
border-radius:100% 0 0 0;

平行四边形

  • transform 变形
display: inline-block;
position: relative;
height: 100px;
width: 200px;
background: #fff;
transform: skewX(-45deg);
  • 伪元素方法
display: inline-block;
position: relative;
height: 100px;
width: 200px;
background: #fff;
position:relative

//thisEle::before
content:'';
position:absolute;
top:0;right:0;bottom:0;left:0;
background:#58a;
z-index:-1;
transform:skew(45deg);

菱形

  • 裁切
display: inline-block;
height: 200px;
width: 200px;
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  • 兼容IE
display: inline-block;
height: 200px;
width: 200px;
background: #fff;
transform: rotate(-45deg);
overflow: hidden;
transform: rotate(45deg) scale(1.5);

← 浮动 →