如何“CSS箭头”工作？ [英] How does "CSS arrow" work?

问题描述

我看过几个CSS箭头的例子 - 基本上，一个箭头/三角形，在纯CSS。这里的示例：

• https://css-tricks.com/snippets/css/css-triangle/


• http://cssarrowplease.com/


• http://apps.eky.hk/css-triangle-generator/

...等等。

但是，无论我对它们进行多少调查，我都不知道它是如何工作的

$ b

div class =snippetdata-lang =jsdata-hide =false>

  .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>  

为什么透明的左右边框产生箭头？发生了什么事？

解决方案

如何在0x0方格周围绘制一个50像素的边框？

制作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& ;首先，让一个盒子，100x100px。我们将使用5px边框和90x90像素的内容区域。< / p> < div id =one>< / div>< p>接下来，让框变小，但使边框变大。你应该开始看到如何独立控制四个边界。我们将使用50x50像素的边框和25像素的边框。< / p> < div id =two>< / div>< p>现在我们将框缩小到0x0，所有边都有50px边框。现在，没有盒子，只有边框。现在很明显，当边界增长并且内容收缩时，边界沿着角以45度角切割。< / p>< div id =three>< / div> p>最后，如果我们使顶部，左侧和右侧边框透明，则留下构成底部边界的下三角形。< / p>< div id =four>< / div> code> 
 
 
 
 
I have seen several examples of "CSS arrows" - basically, an arrow/triangle, done in pure CSS. Examples here:


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


...and so on.

However, no matter how much I look into them, I have no idea how does it actually work and why is an arrow generated.

Take this small example, adapted from the first link:



.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>





Why does transparent left and right border produce arrow up? What is going on?
解决方案
How do you draw a 50px border around a 0x0 square? 

By making a 100x100 square.
#########
#########
#########
#########
#########
But, how do you control all four edges independently?

By cutting the square into 4 triangles. Each triangle is one complete segment of border, but because the border is 50px thick, it is actually composed of four different wedges of solid border:
  #########
#   #####   #
###   #   ###
####     ####
###   #   ###
#   #####   #
  #########
Now, make the top, left and right triangles transparent and you're left with just the bottom border, which forms and upwards-pointing triangle.
      #    
    #####   
  #########
You're left with a triangle pointing upwards, in the color of the bottom border.

Here's a demonstration using a progressively larger and larger border width:



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>





                        
这篇关于如何“CSS箭头”工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！