继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

css实现三角形

VE视频引擎
关注TA
已关注
手记 29
粉丝 1
获赞 7

在实际编程中我们经常会遇到下拉菜单的下三角和一些特殊的图形,那么这些如何用css来实现呢?

例1
图片描述
例2
图片描述
例3
图片描述

原理:

仔细想想,原理非常简单,利用CSS的border以及它的属性值transparent来实现三角形,其中最主要的是要明白由于div的高度跟宽度都为0,margin,padding也为0,所以元素框的大小就是他的border的叠加,由于相邻border会重叠,故存在内容宽高时其实任意一边存在的border都是梯形的,当div内容宽高为0时,border就表现为三角形,将四个border的颜色设置为transparent表示边框透明,而将右边框颜色再设置为红色就发现三角形出现了,其实这个三角形是你设置颜色的边框。

<style>
    div {
        width: 0;
        height: 0;
        border-top: 40px solid transparent;
        border-left: 40px solid transparent;
        border-right: 40px solid transparent;
        border-bottom: 40px solid #ff0000;
    }
    </style>
</head>
<body>
  <div></div>
</body>

展示结果:

图片描述

如果想要不同方向的三角形,只需要改变所需的边框颜色,另外三条边改为transparent(透明)。那么我们就能很简单的实现例1和例3的效果

一些不规则的三角形只需要改变边框的宽度就可以得到不同形状的三角形

<style>
        div{
            width: 0px;
            height: 0px;
            border-width: 0px 0px 200px 100px;
            border-style: solid;
            border-bottom-color:green ;
            border-left-color:transparent;
        }
</style>
</head>
<body>
  <div></div>
</body>

展示结果:

图片描述

打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP