前端开发中箭头形状的制作及对边框定义的一些疑问

新浪微博评论界面如下，注意右上角的箭头符号。

看了看其箭头符号的实现方法，发现是用一个<em>元素加一个特殊符号制作的

于是就想用html元素来实现同样的效果，在实验过程中发现了一种方法达到目标，代码如下：

复制代码
<style type="text/css">
div.arrow
{
    width:0px;
    height:0px;
    border-bottom:50px solid #F00;
    border-left:50px solid #fff;
    border-right:50px solid #fff;
}
</style>
</head>
<body>
<div class="arrow"></div>
</body>
复制代码

效果请看demo:http://wandouyouxi.com/cnblogs/css/untitled-1.html

在这种效果中，可以分别制作出向前后左右四个方向的箭头。例如向上的箭头，只要在css中设置border-bottom，然后设置左右border为白色即可。同理向右的箭头，需要设置border-right，然后将上下border为白色。

最后，要说明的是，我对这种方法的原理还不太清楚。如下图所示，

      

为何在设置了下边框的情况下再去设置左边框，左边框会覆盖下边框，但是为什么分界的地方是斜线呢？去w3c看了下边框的定义：

还是不明白上面提出的疑问，请知道的园友们不吝赐教。

posted @   caochao88  阅读(958)  评论(2)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
点击右上角即可分享
微信分享提示
AI IDE Trae