“CSS 箭头”是如何工作的？ [复制]

Posted 2023-03-06

【中文标题】“CSS 箭头”是如何工作的？ [复制]

【英文标题】：How does "CSS arrow" work? [duplicate]

【发布时间】：2015-12-28 21:48:36

【问题描述】：

我见过几个“CSS 箭头”的例子——基本上是一个箭头/三角形，用纯 CSS 完成。这里的例子：

https://css-tricks.com/snippets/css/css-triangle/ http://cssarrowplease.com/ http://apps.eky.hk/css-triangle-generator/

...等等。

但是，无论我如何研究它们，我都不知道它实际上是如何工作以及为什么会生成一个箭头。

以这个小例子为例，改编自第一个链接：

.arrow-up 
	width: 0; 
	height: 0; 
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	
	border-bottom: 50px solid black;

<div class="arrow-up"></div>

为什么透明的左右边框会产生向上箭头？怎么回事？

【参考方案1】：

如何在 0x0 正方形周围绘制 50px 边框？

制作一个 100x100 的正方形。

#########
#########
#########
#########
#########

但是，如何独立控制所有四个边？

将正方形切成 4 个三角形。每个三角形是一个完整的边框段，但由于边框是 50px 厚，实际上是由四个不同的楔形实心边框组成：

  #########
#   #####   #
###   #   ###
####     ####
###   #   ###
#   #####   #
  #########

现在，让顶部、左侧和右侧的三角形透明，剩下的只有底部边框，形成向上的三角形。

      #    
    #####   
  #########

你会留下一个向上的三角形，与底部边框的颜色相同。

这是一个使用越来越大的边框宽度的演示：

div 
  margin: 10px;


#one 
  width: 90px;
  height: 90px;
    
  border-top: 5px solid blue;
  border-left: 5px solid red;
  border-right: 5px solid green;
  border-bottom: 5px solid black;


#two 
  width: 50px;
  height: 50px;
    
  border-top: 25px solid blue;
  border-left: 25px solid red;
  border-right: 25px solid green;
  border-bottom: 25px solid black;



#three 
  width: 0;
  height: 0;
    
  border-top: 50px solid blue;
  border-left: 50px solid red;
  border-right: 50px solid green;
  border-bottom: 50px solid black;



#four 
  width: 0;
  height: 0;
    
  border-top: 50px solid transparent;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid black;

<p>First, lets make a box, 100x100px. We'll use a 5px border, and a 90x90px content area.</p>
  
<div id="one"></div>

<p>Next, lets make the box smaller, but make the borders bigger. You should start to see how the four borders are controlled independly. We'll use a 50x50px box and a 25px border.</p>
  
<div id="two"></div>

<p>Now we'll shrink the box down to 0x0, with a 50px border on all edges. Now, there is no box, only border. It's now quite obvious that, as the border grows and the content shrinks, the border is cut along the corners at a 45 degree angle.</p>

<div id="three"></div>

<p>Finally, if we make the top, left and right borders transparent, ony the lower triangle making up the bottom border is left.</p>

<div id="four"></div>