CSS技巧-CSS的形状有很多不同的CSS形状，我特别困惑于三角形：
#三角形向上{宽度：0；高度：0；左边框：50px实心透明；右边框：50px实心透明；边框底部：100px纯红色；}<div id=“triangle up”></div>
它是如何以及为什么工作的？
当前回答
CSS剪辑路径
这是我觉得这个问题错过了的；剪辑路径
简单地剪辑路径具有剪切路径属性的剪切类似于从矩形纸张上剪切形状（如圆形或五边形）。该属性属于“CSS屏蔽模块级别1”规范。规范指出，“CSS屏蔽提供了两种方法来部分或完全隐藏视觉元素的部分：屏蔽和剪切”。粉碎杂志摘录
剪辑路径将使用元素本身而不是其边界来剪切您在其参数中指定的形状。它使用了一个超简单的基于百分比的坐标系统，这使得编辑非常容易，意味着你可以在几分钟内拿起它并创建奇怪而奇妙的形状。
三角形形状示例
第二部分{-webkit剪辑路径：多边形（50%0%，0%100%，100%100%）；剪辑路径：多边形（50%0%、0%100%、100%100%）；背景：红色；宽度：100px；高度：100px；}<div></div>
缺点
目前它确实有一个主要的缺点，一个是它主要缺乏支持，只在-webkit浏览器中得到了真正的覆盖，在IE上没有支持，在FireFox中只有很部分。
资源
这里有一些有用的资源和材料，可以帮助您更好地了解剪辑路径，并开始创建自己的剪辑路径。
Clippy-剪辑路径生成器W3C候选推荐文件MDN剪辑路径文档剪辑路径浏览器支持
其他回答
其他人已经很好地解释了这一点。让我给你一个动画，它将快速解释这一点：http://codepen.io/chriscoyier/pen/lotjh
这里有一些代码供您使用和学习这些概念。
HTML格式：
<html>
<body>
<div id="border-demo">
</div>
</body>
</html>
CSS:
/*border-width is border thickness*/
#border-demo {
background: gray;
border-color: yellow blue red green;/*top right bottom left*/
border-style: solid;
border-width: 25px 25px 25px 25px;/*top right bottom left*/
height: 50px;
width: 50px;
}
玩这个，看看会发生什么。将高度和宽度设置为零。然后移除顶部边框并使左右透明，或者只需查看下面的代码以创建css三角形：
#border-demo {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}
这是另一把小提琴：
.container:after {
position: absolute;
right: 0;
content: "";
margin-right:-50px;
margin-bottom: -8px;
border-width: 25px;
border-style: solid;
border-color: transparent transparent transparent #000;
width: 0;
height: 0;
z-index: 10;
-webkit-transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
bottom: 21px;
}
.container {
float: left;
margin-top: 100px;
position: relative;
width: 150px;
height: 80px;
background-color: #000;
}
.containerRed {
float: left;
margin-top: 100px;
position: relative;
width: 100px;
height: 80px;
background-color: red;
}
https://jsfiddle.net/qdhvdb17/
使用剪辑路径：多边形（50%0%，100%100%，0%100%）；用于创建简单的三角形
<div class="triangle"></div>
.triangle{width:200px; height:200px;background:#000;clip-path: polygon(50% 0%, 100% 100%, 0% 100%);}
如果您想将边框应用于三角形，请阅读以下内容：使用CSS创建三角形？
几乎所有的答案都集中在使用边界构建的三角形上，所以我将详细介绍线性梯度方法（从@lima_fil的答案开始）。
使用像45°这样的度数值将迫使我们遵守特定的高度/宽度比，以获得我们想要的三角形，这不会是响应性的：
.tri三{宽度：100px；高度：100px；背景：线性梯度（45度，透明49.5%，红色50%）；/*为了说明*/边框：1px实心；}很好<div class=“tri”></div>坏的一个<div class=“tri”style=“width:150px”></div>坏的一个<div class=“tri”style=“height:30px”></div>
相反，我们应该考虑预定义的方向值，如底部、顶部等。在这种情况下，我们可以获得任何类型的三角形，同时保持其响应。
1） 矩形三角形
为了获得这样的三角形，我们需要一个线性梯度和一个对角线方向，如从右下角、从左上角、从右下等
三-1，三-2{显示：内联块；宽度：100px；高度：100px；背景：线性渐变（到左下角，透明49.5%，红色50%）；边框：1px实心；动画：更改2s线性无限交替；}.三-2{背景：线性渐变（到右上角，透明49.5%，红色50%）；边框：无；}@关键帧更改{来自{宽度：100px；高度：100px；}至{高度：50px；宽度：180px；}}<div class=“tri-1”></div><div class=“tri-2”></div>
2） 等腰三角形
对于这一个，我们将需要2个像上面一样的线性梯度，每个梯度将占宽度（或高度）的一半。就像我们创建了第一个三角形的镜像。
.tri三{显示：内联块；宽度：100px；高度：100px；背景图像：线性梯度（至右下角，透明49.5%，红色50%），线性梯度（至左下方，透明49.5%，红色50%）；背景大小：50.3%100%；/*我使用一个略大于50%的值，以避免两个梯度之间的小间隙*/背景位置：左、右；背景重复：无重复；动画：更改2s线性无限交替；}@关键帧更改{来自{宽度：100px；高度：100px；}至{高度：50px；宽度：180px；}}<div class=“tri”></div>
3） 等边三角形
这个处理起来有点棘手，因为我们需要保持渐变的高度和宽度之间的关系。我们将使用与上述相同的三角形，但为了将等腰三角形转换为等边三角形，我们将使计算更加复杂。
为了方便起见，我们将考虑到div的宽度是已知的，并且高度足够大，可以在内部绘制三角形（height>=width）。
我们有两个梯度g1和g2，蓝色线是divw的宽度，每个梯度都有50%的宽度（w/2），三角形的每一边都等于w。绿色线是两个梯度hg的高度，我们可以很容易地得到以下公式：
（w/2）²+hg²=w²--->hg=（sqrt（3）/2）*w--->hg=0.866*w
我们可以依靠calc（）进行计算并获得所需的结果：
.tri三{--w： 100像素；宽度：var（--w）；高度：100px；显示：内联块；背景图像：线性梯度（至右下角，透明49.5%，红色50%），线性梯度（至左下方，透明49.5%，红色50%）；背景大小：calc（var（--w）/2+0.5px）calc（0.866*var（--w））；背景位置：左下、右下；背景重复：无重复；}<div class=“tri”></div><div class=“tri”style=“--w:80px”></div><div class=“tri”style=“--w:50px”></div>
另一种方法是控制div的高度，并保持渐变的语法简单：
.tri三{--w： 100像素；宽度：var（--w）；高度：计算值（0.866*var（--w））；显示：内联块；背景：线性梯度（至右下，透明49.8%，红色50%）向左，线性梯度（至左下，透明49.8%，红色50%）；背景尺寸：50.2%100%；背景重复：无重复；}<div class=“tri”></div><div class=“tri”style=“--w:80px”></div><div class=“tri”style=“--w:50px”></div>
4） 随机三角形
要获得一个随机三角形，很容易，因为我们只需要删除每个三角形的50%的条件，但我们应该保持两个条件（两个条件都应该具有相同的高度，两个宽度的总和应该是100%）。
.三-1{宽度：100px；高度：100px；显示：内联块；背景图像：线性梯度（至右下角，透明50%，红色0），线性梯度（至左下角，透明50%，红色0）；背景尺寸：20%60%，80%-60%；背景位置：左下、右下；背景重复：无重复；}<div class=“tri-1”></div>
但如果我们想为每一侧定义一个值呢？我们只需要再次计算！
让我们将hg1和hg2定义为渐变的高度（两者都等于红线），然后将wg1和wg2定义为梯度的宽度（wg1+wg2=a）。我不会详细说明计算，但在最后我们将得到：
wg2 = (a²+c²-b²)/(2a)
wg1 = a - wg2
hg1 = hg2 = sqrt(b² - wg1²) = sqrt(c² - wg2²)
现在我们已经达到了CSS的极限，因为即使使用calc（），我们也无法实现这一点，所以我们只需要手动收集最终结果并将其作为固定大小使用：
.tri三{--wg1:20px；--wg2:60px；--汞：30像素；宽度：calc（var（--wg1）+var（--wg2））；高度：100px；显示：内联块；背景图像：线性梯度（至右下角，透明49.5%，红色50%），线性梯度（至左下方，透明49.5%，红色50%）；背景大小：var（--wg1）var（--hg），var（--wg2）var（-hg）；背景位置：左下、右下；背景重复：无重复；}<div class=“tri”></div><div class=“tri”style=“--wg1:80px；--wg2:60px；--hg:100px；”></div>
奖金
我们不应该忘记，我们也可以应用旋转和/或倾斜，我们有更多的选择来获得更多的三角形：
.tri三{--wg1:20px；--wg2:60px；--汞：30像素；宽度：calc（var（--wg1）+var（--wg2）-0.5px）；高度：100px；显示：内联块；背景图像：线性梯度（至右下角，透明49%，红色50%），线性梯度（至左下角，透明49%，红色50%）；背景大小：var（--wg1）var（--hg），var（--wg2）var（-hg）；背景位置：左下、右下；背景重复：无重复；}<div class=“tri”></div><div class=“tri”style=“transform:偏斜Y（25deg）”></div><div class=“tri”style=“--wg1:80px；--wg2:60px；--hg:100px；”></div><div class=“tri”style=“--wg1:80px；--wg2:60px；--hg:100px；transform:rotate（20deg）”></div>
当然，我们应该记住SVG解决方案，它在某些情况下更适合：
svg公司{宽度：100px；高度：100px；}多边形{填充：红色；}<svg viewBox=“0 0 100 100”><多边形点=“0100 0,0 100100”/></svg><svg viewBox=“0 0 100 100”><多边形点=“0100 50，0 100100”/></svg><svg viewBox=“0 0 100 100”><多边形点=“0100 50，23 100100”/></svg><svg viewBox=“0 0 100 100”><多边形点=“20，60 50，43 80100”/></svg>
假设我们有以下div：
<div id="triangle" />
现在逐步编辑CSS，这样您就可以清楚地了解周围发生了什么
步骤1：JSfiddle链接：
#triangle {
background: purple;
width :150px;
height:150PX;
border-left: 50px solid black ;
border-right: 50px solid black;
border-bottom: 50px solid black;
border-top: 50px solid black;
}
这是一个简单的div，带有非常简单的CSS。所以外行人可以理解。Div的尺寸为150 x 150像素，边框为50像素。图像附于：
步骤2:JSfiddle链接：
#triangle {
background: purple;
width :150px;
height:150PX;
border-left: 50px solid yellow ;
border-right: 50px solid green;
border-bottom: 50px solid red;
border-top: 50px solid blue;
}
现在我刚刚更改了所有4个边的边框颜色。图像已附加。
步骤：3 JSfiddle链接：
#triangle {
background: purple;
width :0;
height:0;
border-left: 50px solid yellow ;
border-right: 50px solid green;
border-bottom: 50px solid red;
border-top: 50px solid blue;
}
现在我刚刚将div的高度和宽度从150像素更改为零。图像已附加
第4步：JSfiddle：
#triangle {
background: purple;
width :0px;
height:0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid red;
border-top: 50px solid transparent;
}
现在，我已经使所有边界都透明，除了底部边界。图像附在下面。
第5步：JSfiddle链接：
#triangle {
background: white;
width :0px;
height:0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid red;
border-top: 50px solid transparent;
}
现在我把背景色改成了白色。图像已附加。
因此，我们得到了所需的三角形。
推荐文章
- 改变引导输入焦点蓝色发光
- 我如何使一个div上的滚动条只在必要时可见?
- CSS:控制项目符号和<li>之间的空格
- 调试打印样式表的建议?
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素，而不占用文档流中的空间
- 禁用身体滚动
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 检测输入是否有文本在它使用CSS -在一个页面上，我正在访问和不控制?
