问答博客标签用户活动
logo极客观点logo研发管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css如何完成长方形中一个小直角梯形？

头像
君杰
    21111

    image.png
    如何在这样一个长方形div中，实现一个直接梯形，求救各位大佬请教下

    css
    阅读 4.6k
    6 个回答
    得票最新
    头像
    船长
      258210
      广西南宁市
      ✓ 已被采纳

      利用clip-path的polygon函数进行裁剪就很容易做到
      效果图

      HTML部分

      <div class="container">
        <div class="status">空闲</div>
        <div class="number">3<span>台</span></div>
    </div>

      CSS部分

      .container {
            width: 600px;
            height: 300px;
            background-color: #FFD900;
            border-radius: 20px;
            position: relative;
        }
        .container .status {
            text-align: right;
            color: #fff;
            margin: 50px 50px 0;
            font-size: 40px;
            font-weight: 700;
        }
        .container .number {
            width: 580px;
            height:280px;
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: #fff;
            z-index: 2;
            display: flex;
            align-items: flex-end;
            font-weight: 700;
            font-size: 40px;
            padding-left: 50px;
            padding-bottom: 50px;
            box-sizing: border-box;
            clip-path: polygon(0% 0%,30% 0px,70% 50%,100% 50%,100% 100%,0 100%);
        }
        .container .number span {
            color: #ddd;
            margin-left: 30px;
        }
      头像头饰
      陟上晴明
        20.9k124691

        其实主要就是使用伪类元素来实现三角形，具体如何使用伪类元素做一个三角形可以看这篇文章。

        其他的就是正常布局了，大概如下的情况。
        布局结构

        这是最后实现的效果 CodePen Demo

        其实使用 flex 布局就可以实现了，但是我偷懒直接使用了绝对定位，把“空闲”状态直接定位到了右上角，问题不大。

        头像头饰
        Meathill
          22.2k123642

          其实就是个矩形+三角形嘛，矩形相信你没问题，三角形推荐下面这篇文章：

          CSS Triangle

          头像
          阿良
            1637

            利用伪元素一个做三角形 一个做文字输入

            头像
            等时钟成长
              19512

              提供一个利用线性渐变linear-gradient的方案:

              <div class="container">
  <div class="content">
    <div class="corner">
    </div>
  </div>
</div>
              :root {
  --card-width: 360px;
  --card-height: 240px;
  --card-background: #fbd839;
  --card-foreground: white;
}

.container {
  background-color: var(--card-background);
  position: relative;
  border-radius: 5%;
  width: var(--card-width);
  height: var(--card-height);
}

.container .content {
  background-color: var(--card-foreground);
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
}

.content .corner {
  position: absolute;
  right: 0;
  background: linear-gradient(
      45deg,
      var(--card-foreground) 0,
      var(--card-foreground) 50%,
      var(--card-background) 50%,
      var(--card-background) 100%);
  width: 100%;
  height: 50%;
}

              image.png

              头像头饰
              fff
                595

                可以使用前端三角形的原理来实现，直接上代码，简单易懂~~~

                <!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>梯形实现</title>
    <style>
        .container {
            margin: 0 auto;
            width: 300px;
            height: 180px;
            border-radius: 5%;
            background-color: #ffd608;
            padding: 10px;
            box-sizing: border-box;
            display: flex;
        }

        .left {
            background-color: #fff;
            height: 100%;
            flex: 1;
        }

        .right {
            flex: 2;
            position: relative;
        }

        .rightTop {
            width: 0;
            height: 0;
            border: 40px solid #ffd608;
            border-left: 40px solid #fff;
        }

        .test {
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 0;
            border: 40px solid transparent;
            border-bottom: 40px solid #fff;
        }

        .rightBottom {
            width: 100%;
            height: 50%;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="right">
            <div class="rightTop"></div>
            <div class="test"></div>
            <div class="rightBottom"></div>
        </div>
    </div>
</body>

</html>

                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                被 1 篇内容引用
                推荐问题
                宣传栏