用 CSS 实现画三角形

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="rectangle">

    </div>
  </body>

  <style>
    .rectangle {
      height: 0;
      width: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-top: 0;
      border-bottom: 50px solid #f40355;
    }
  </style>
</html>
相关推荐
我爱学习_zwj1 小时前
深入浅出Node.js-1(node.js入门)
前端·webpack·node.js
疯狂的沙粒1 小时前
前端开发 vue 中如何实现 u-form 多个form表单同时校验
javascript·vue.js·ecmascript
IT 前端 张1 小时前
2025 最新前端高频率面试题--Vue篇
前端·javascript·vue.js
喵喵酱仔__1 小时前
vue3探索——使用ref与$parent实现父子组件间通信
前端·javascript·vue.js
_NIXIAKF1 小时前
vue中 输入框输入回车后触发搜索(搜索按钮触发页面刷新问题)
前端·javascript·vue.js
InnovatorX2 小时前
Vue 3 详解
前端·javascript·vue.js
布兰妮甜2 小时前
html + css 顶部滚动通知栏示例
前端·css·html
种麦南山下2 小时前
vue el table 不出滚动条样式显示 is_scrolling-none,如何修改?
前端·javascript·vue.js
天弈初心2 小时前
Vue 组件开发:构建高效可复用的 UI 构建块
javascript·vue.js
杨荧2 小时前
【开源免费】基于Vue和SpringBoot的贸易行业crm系统(附论文)
前端·javascript·jvm·vue.js·spring boot·spring cloud·开源