css制作梯形_css 梯形

作者：AllinToyou | 2024-02-27 06:36:50

踩

css 梯形

用css制作梯形最常用的方法就是通clip-path来裁剪一个长方形。通过设置polygon属性4个顶点的位置达到效果。


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css制作梯形</title>
    <style>
      .tx {
        width: 400px;
        height: 240px;
        border: 1px solid rebeccapurple;
        text-align: center;
        line-height: 240px;
        background-color: aquamarine;
        clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
      }
      .tx1 {
        width: 400px;
        height: 240px;
        border: 1px solid rebeccapurple;
        text-align: center;
        line-height: 240px;
        background-color: aquamarine;
        clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%);
      }
    </style>
  </head>
  <body>
    <h1 class="tx">等腰梯形</h1>
    <h1 class="tx1">直角梯形</h1>
  </body>
</html>

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/150769