纯css代码怎么写三角形

时间:2年前   阅读:2555

如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法。

最容易想到的,是叠加层。思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色;内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。

<style type="text/css">
    #mydiv{
        height: 0px;
        width: 0px;
        border-left: 50px solid  transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
    }
</style>
<body>
    <div id="mydiv"></div>
    </body>

效果如下所示:

解析:利用CSS写三角形其实很简单,如果你理解了border属性的原理你就会明白这个三角形是怎么来的。

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

上一篇:投资沪深300ETF期权需要做好什么准备?

下一篇:DTCMS视频模版更改方法

网友评论

请先 登录 再评论,若不是会员请先 注册