鱼C论坛

 找回密码
 立即注册
查看: 3705|回复: 21

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

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

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

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

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


                               
登录/注册后可看大图


问:

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





答:

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






如果喜欢,请订阅

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

使用道具 举报

发表于 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;
<!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>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

使用道具 举报

发表于 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
回复

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

            /* 单个三角形 */
            border-color:blue red lightgreen yellow;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

发表于 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
回复

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-22 18:16

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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