用CSS3画一个三角形

javascript 复制代码
<style>
.up{
    width:0;
    height:0;
    border: 100px solid transparent;
    border-top: 100px solid red;/*红色*/
}
.down{
    width:0;
    height:0;
    border: 100px solid transparent;
    border-bottom: 100px solid blue;/*蓝色*/
}
.left{
    width:0;
    height:0;
    border: 100px solid transparent;
    border-left: 100px solid pink;/*黑色*/
}
.right{
    width:0;
    height:0;
    border: 100px solid transparent;
    border-right: 100px solid pink;/*黄色*/
}
</style>
 
<body>
    <div class="up"></div>
    <div class="down"></div>
    <div class="left"></div>
    <div class="right"></div>
</body>
实现效果
相关推荐
西梯卧客6 分钟前
[4-3] 异步编程与事件循环 · 终极异步解决方案 (Generator & Async/Await)
javascript
ssshooter6 分钟前
infer,TS 类型系统的手术刀
前端·面试·typescript
用户3167361303426 分钟前
图片懒加载,我总结了三个方式
前端
灰太狼大大王8 分钟前
2026 前端基石:HTML5 全景知识体系指南(从入门到架构师思维)
前端
米丘8 分钟前
vue-router 5.x 文件式路由
前端·vue.js
始持9 分钟前
第十五讲 本地存储
前端·flutter
不甜情歌9 分钟前
JS 拷贝:浅拷贝 / 深拷贝原理 + 常用方法
前端·javascript
敲代码的约德尔人9 分钟前
Vue 3 响应式系统完全指南:我在 4 个项目中踩坑后总结的血泪经验
前端·vue.js
始持10 分钟前
第十四讲 网络请求与数据解析
前端·flutter
Roselind_Yi11 分钟前
技术拆解:《从音频到动效:我是如何用 Web Audio API 拆解音乐的?》
前端·javascript·人工智能·音视频·语音识别·实时音视频·audiolm