问答博客标签用户活动
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

怎么把一个矩形div变成一个直角三角形？

头像
寅春树
    1.3k11206457

    下面的是一个正常的div，怎么变成浅角部分，就是把一个矩形的div变成下面是直角的直角三角形。
    image.png

    image.png

    css
    阅读 1.9k
    avatarAI BotBETA
    要将一个矩形的 `div` 变成一个直角三角形（例如，底部为直角的直角三角形），你可以使用 CSS 的 `clip-path` 属性。这是一个简单而有效的方法来裁剪元素以形成所需的形状。

下面是一个示例代码，展示如何把一个矩形的 `div` 变成底部为直角的直角三角形：

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rectangle to Right Triangle</title>
    <style>
    .rectangle {

    width: 200px;
height: 200px;
background-color: lightblue;
clip-path: polygon(0 0, 100% 0, 100% 50%);

    }
    </style>
    </head>
    <body>
    <div class="rectangle"></div>
    </body>
    </html>

    
在这个示例中，`.rectangle` 类应用了 `clip-path: polygon(0 0, 100% 0, 100% 50%)`。这个 `polygon` 函数定义了三角形的三个点：
- 第一个点 `(0 0)` 是左上角。
- 第二个点 `(100% 0)` 是右上角。
- 第三个点 `(100% 50%)` 是底部中点的位置，这确保了三角形在底部形成一个直角。

通过调整这些点的坐标，你可以改变三角形的形状和位置。在这个例子中，我们创建了一个底部为直角的直角三角形。
    4 个回答
    得票最新
    头像头饰
    陟上晴明
      21.1k124691

      如果只是样式的话，可以用 border 来实现。

      图片.png

      <div></div>
<style>
div {
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-top-width: 100px;
  border-right-width: 400px;
  border-right-color: #cbcbcb;
}
</style>
      头像
      小蚊酱
        5.3k22038

        div的边框是由4个独立的边框组成，假如我们把div的宽高设置为0，只有边框，那边框大概长这样：

        边框组合

        因此，想要实现什么三角，就让哪个边框有颜色、其他边框颜色透明即可。比如箭头向左的三角，可以是：

        .arrow {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px;
  // 顺序是上、右、下、左
  border-color: transparent #00f transparent transparent;
}

        以你题目中的直角三角形，可以使用下边框和右边框组合。如果三角形的边长不一样长，可以通过调整边框的宽度来实现

        .triangle {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-top-width: 20px;
  border-bottom-width: 20px;
  border-left-width: 40px;
  border-right-width: 40px;
  border-color: transparent #cececf #cececf transparent;
}

        实现后的图案：

        直角三角形

        参考： CSS实现小三角

        头像
        Seven
          587116
          <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>镜像直角三角形示例</title>
    <style>
        .triangle {
            width: 0;
            height: 0;
            border-top: 100px solid transparent;
            border-right: 300px solid #D3D3D3; /* 灰色背景色 */
        }
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>
</html>
          头像
          查看图片
            3597

            上面的答案都是基于 border 而不是 content 实现的

            在某些情况下会有局限性，比如你不能用占用的矩形区域来看待它，在和其它元素一起渲染排列时就会出问题

            其实可以使用 svg 实现

            <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,100 200,0 200,100" fill="red" />
</svg>

            image.png

            查看全部 4 个回答
            推荐问题
            宣传栏