search

zhaobinglong / myBlog

https://zhaobinglong.github.io/myBlog/
MIT License
7 stars 0 forks source link

CSS绘制各种形状 #162

Open zhaobinglong opened 2 years ago

zhaobinglong commented 2 years ago

绘制平行四边形

zhaobinglong commented 2 years ago

绘制梯形__

zhaobinglong commented 2 years ago

剪裁任意形状clip-path

polygon中可以绘制任意数量的坐标值，最后会被自动闭环剪裁

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    .triangles {
      width: 200px;
      height: 200px;
      background-color: black;
      clip-path: polygon( 50% 0% ,100% 100%,0% 100% );
    }
  </style>
</head>

<body>
  <div class="triangles"></div>
</body>

</html>

polygon

polygon(x1 y1, x2 y2, ..., xn yn) 定义了每一个点的坐标，从图中也能看出，起点是从左上角开始计算的，可以用百分百，也可以用px等单位。 image