用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>
实现效果
相关推荐
未来可期wlkq几秒前
overflow跟input搭配使用,会导致内容区整体移动,overflow属性导致
javascript·css·vue.js
Liu.7743 分钟前
vue使用lodop控件打印
前端·javascript·vue.js
OpenTiny社区10 分钟前
TinySearchBox 综合搜索组件重磅更新:实现 Vue 2 和 Vue 3 双版本适配!
前端·javascript·vue.js
GDAL16 分钟前
HTML 实现登录状态记录 深入全面讲解教程
前端·html·登录验证
(づど)18 分钟前
一套齐全的环境设置:nvm\node\nrm\pnpm
前端·笔记
晷龙烬21 分钟前
Vue 3 自定义指令:从“瑞士军刀”到“专属工具” !
前端·javascript·vue.js
MediaTea23 分钟前
思考与练习(第四章 程序组成与输入输出)
java·linux·服务器·前端·javascript
BD_Marathon24 分钟前
【JavaWeb】NPM_简介和相关配置
前端·npm·node.js
咸鱼加辣27 分钟前
【前端框架】react
前端·react.js·前端框架
unicrom_深圳市由你创科技28 分钟前
Vue 3 高效开发技巧总结
前端·javascript·vue.js