个人博客 > 学无止境 > WEB前端 > css实现全兼容三角形

css实现全兼容三角形

css border实现

一个div或者元素的border并不是我们直观意义上的一条有高度的线,而是一个等高梯形或者三角形(宽高为0时),可以看一下效果:

.triangle{
    width:0;
    height:0;
    border-width:20px;    
    border-style:solid dashed dashed dashed;    
    border-color:#e66161 transparent transparent transparent;
}

一般用于网站有子栏目下拉的时候调用,比如微博顶部的下拉菜单。

代码可以根据实际情况进行修改。

本文出自:琅枫个人博客。如需转载请注明出处!

本文出处:"https://www.phpfeng.cn/learn/web/124.html"

如果您觉得文章对你有帮助,可以进行打赏。
打赏多少,您高兴就行,谢谢您对琅枫博客的支持! ~(@^_^@)~

微信打赏

琅枫博客微信号

支付宝打赏

琅枫博客个人支付宝
本文关键词: 三角形



你想在庞大的互联网上留下一丝足迹?

我不想成为一个庸俗的人。十年百年后,当我们死去,质疑我们的人同样死去,后人看到的是裹足不前、原地打转的你,还是一直奔跑、走到远方的我?

点我了解如何搭建个人博客?