设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › Web密训营 › 如何用纯CSS创建一个三角形？
12下一页
返回列表 发新帖
查看: 3166|回复: 21

[面试宝典] 如何用纯CSS创建一个三角形？

[复制链接]
不二如是
发表于 2017-5-15 05:57:13 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
本帖最后由 不二如是 于 2020-3-17 17:29 编辑


                               
登录/注册后可看大图


问：

如何用纯CSS创建一个三角形？




答：

游客，如果您要查看本帖隐藏内容请回复





如果喜欢，请订阅 ：

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

aoliann
发表于 2017-5-19 00:46:03 | 显示全部楼层
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
    #triangle-up{
        width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;

    }
</style>
</head>
<body>
    <div id="triangle-up"></div>
</body>
</html>

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2017-5-19 05:59

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

不二如是
 楼主| 发表于 2017-5-19 05:59:39 | 显示全部楼层
aoliann 发表于 2017-5-19 00:46
#triangle-up{
        width: 0;
    height: 0;
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <style type="text/css">
  6.         #triangle-up{
  7.             width: 0;
  8.             height: 0;
  9.             border-left: 50px solid transparent;
  10.             border-right: 50px solid transparent;
  11.             border-bottom: 100px solid red;

  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17. <div id="triangle-up"></div>
  18. </body>
  19. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

落叶千年
发表于 2018-7-27 09:22:38 | 显示全部楼层
厉害了
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

你很6
发表于 2018-9-27 16:23:49 From FishC Mobile | 显示全部楼层
()
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

我要天天向上
发表于 2018-10-29 21:03:02 | 显示全部楼层
学习
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

臭鱼小虾
发表于 2018-10-30 16:02:41 | 显示全部楼层
1
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

风中雪_1
发表于 2018-11-4 00:10:57 From FishC Mobile | 显示全部楼层
厉害
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

皛龘骉
发表于 2018-11-14 12:47:00 | 显示全部楼层
阿拉伯烤鱼
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

lbjstudypython
发表于 2018-11-22 12:33:45 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6.     <style>
  7.         div {
  8.             width:50px;
  9.             height:50px;
  10.             border:100px solid;
  11.             /* 平分效果 */
  12.             /*border-color:red green blue black; */

  14.             /* 单个三角形 */
  15.             border-color:blue red lightgreen yellow;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div></div>
  21. </body>
  22. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

chenyihao009
发表于 2019-11-5 10:26:00 | 显示全部楼层
socool
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

tg123
发表于 2020-6-9 08:46:30 | 显示全部楼层
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

大豆子do
发表于 2020-6-29 20:48:32 | 显示全部楼层
1
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

qina10
发表于 2020-9-22 11:39:05 | 显示全部楼层
border-
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

marumarum
发表于 2021-3-3 00:19:57 | 显示全部楼层
m
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

一坨稀饭灬
发表于 2021-3-5 17:53:46 | 显示全部楼层
d
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

一笙彤
发表于 2021-3-15 18:31:08 | 显示全部楼层
1
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

小苏鱿鱼2
发表于 2021-3-23 16:53:29 | 显示全部楼层
123
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

indred
发表于 2021-12-31 11:45:08 | 显示全部楼层
看看
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

甲鱼护甲锻造师
发表于 2022-6-8 09:12:44 From FishC Mobile | 显示全部楼层
1
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

下一页 »
12下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-24 19:13

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表