CSS技巧-CSS的形状有很多不同的CSS形状，我特别困惑于三角形：
#三角形向上{宽度：0；高度：0；左边框：50px实心透明；右边框：50px实心透明；边框底部：100px纯红色；}<div id=“triangle up”></div>
它是如何以及为什么工作的？
当前回答
其他人已经很好地解释了这一点。让我给你一个动画，它将快速解释这一点：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;
}
其他回答
剪辑路径对我来说效果最好-适用于具有和不具有固定尺寸的div/容器：
.triangleContainer{
position: relative;
width: 500px;
height: 500px;
}
.triangleContainer::before{
content: "";
position: absolute;
background:blue;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
这是另一把小提琴：
.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/
这是一个老问题，但我认为值得分享如何使用这种三角形技术创建箭头。
步骤1：
让我们创建两个三角形，对于第二个，我们将使用：after伪类，并将其放置在另一个的正下方：
.箭头{宽度：0；高度：0；边框半径：50px；显示：内联块；位置：相对；}.arrow：在之后{内容：“”；宽度：0；高度：0；位置：绝对；}.向上箭头{左边框：50px实心透明；右边框：50px实心透明；边框底部：50px实心#333；}.向上箭头：之后{顶部：5px；左边框：50px实心透明；右边框：50px实心透明；边框底部：50px实心#ccc；右：-50px；}<div class=“arrow arrow up”></div>
步骤2
现在，我们只需将第二个三角形的主要边界颜色设置为与背景相同的颜色：
.箭头{宽度：0；高度：0；边框半径：50px；显示：内联块；位置：相对；}.arrow：在之后{内容：“”；宽度：0；高度：0；位置：绝对；}.向上箭头{左边框：50px实心透明；右边框：50px实心透明；边框底部：50px实心#333；}.向上箭头：之后{顶部：5px；左边框：50px实心透明；右边框：50px实心透明；边框底部：50px实心#fff；右：-50px；}<div class=“arrow arrow up”></div>
摆弄所有箭头：http://jsfiddle.net/tomsarduy/r0zksgeu/
假设我们有以下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;
}
现在我把背景色改成了白色。图像已附加。
因此，我们得到了所需的三角形。
这里是我为演示而创建的JSFiddle动画。
另请参见下面的代码段。
这是一个由Screencast制作的动画GIF
变换=[｛'border-left-width'：'30'，'margin-left'：'70'｝，{'婴儿-婴儿宽度'：'80'}，｛'右-右宽度‘：‘30’｝，｛“订单到页面宽度”：“0”，“页边空白”：“70”｝，｛'宽度'：“0”｝，｛“高度”：“0”，“页边空白”：“120”｝，｛'orderLeftColor'：'transparent'｝，｛'OrderRightColor'：'透明'｝];$（'#a'）.click（function（）｛$（'.border'）.ctrigger（“click”）；｝）；（函数（$）{var持续时间=1000$（'.border'）.click（function）{对于（var i=0；i<transforms.length；i++）{$（这个）.animate（变换[i]，持续时间）}}).end（）}（jQuery））.边框{边距：20px 50px；宽度：50px；高度：50px；边框宽度：50px；边框样式：实心；边框顶部颜色：绿色；边框右侧颜色：黄色；边框底部颜色：红色；边框左侧颜色：蓝色；光标：指针}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js“></script><script src=“https://code.jquery.com/color/jquery.color-2.1.2.min.js“></script>单击它<br><div class=“border”></div>
随机版本
/***将数组元素顺序随机化。*使用Durstenfeld洗牌算法。*/函数shuffleArray（数组）{对于（var i=array.length-1；i>0；i-）{var j=数学地板（数学随机（）*（i+1））；var temp=数组[i]；array[i]=array[j]；array[j]=温度；}返回数组；}变换=[｛'border-left-width'：'30'，'margin-left'：'70'｝，{'婴儿-婴儿宽度'：'80'}，｛'右-右宽度‘：‘30’｝，｛“订单到页面宽度”：“0”，“页边空白”：“70”｝，｛'宽度'：“0”｝，｛“高度”：“0”｝，｛'orderLeftColor'：'transparent'｝，｛'OrderRightColor'：'透明'｝];transforms=shuffleArray（变换）$（'#a'）.click（function（）｛$（'.border'）.ctrigger（“click”）；｝）；（函数（$）{var持续时间=1000$（'.border'）.click（function）{对于（var i=0；i<transforms.length；i++）{$（这个）.animate（变换[i]，持续时间）}}).end（）}（jQuery））.边框{边距：50px；宽度：50px；高度：50px；边框宽度：50px；边框样式：实心；边框顶部颜色：绿色；边框右侧颜色：黄色；边框底部颜色：红色；边框左侧颜色：蓝色；光标：指针}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js“></script><script src=“https://code.jquery.com/color/jquery.color-2.1.2.min.js“></script>单击它<br><div class=“border”></div>
一次性版本
$（'#a'）.click（function（）｛$（'.border'）.ctrigger（“click”）；｝）；（函数（$）{var持续时间=1000$（'.border'）.click（function）{$（这个）.animate（｛'顺序到宽度'：0，'边框左宽度'：30，'右边框宽度'：30，'边框底部宽度'：80，'width'：0，“高度”：0，'左边距'：100，'页边空白'：150，'borderTopColor'：'透明'，'borderRightColor'：'透明'，“borderLeftColor”：“transparent”｝，持续时间）}).end（）}（jQuery））.边框{边距：50px；宽度：50px；高度：50px；边框宽度：50px；边框样式：实心；边框顶部颜色：绿色；边框右侧颜色：黄色；边框底部颜色：红色；边框左侧颜色：蓝色；光标：指针}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js“></script><script src=“https://code.jquery.com/color/jquery.color-2.1.2.min.js“></script>单击它<br><div class=“border”></div>
