CSS技巧-CSS的形状有很多不同的CSS形状，我特别困惑于三角形：
#三角形向上{宽度：0；高度：0；左边框：50px实心透明；右边框：50px实心透明；边框底部：100px纯红色；}<div id=“triangle up”></div>
它是如何以及为什么工作的？
当前回答
这是另一把小提琴：
.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/
其他回答
考虑下面的三角形
.triangle {
border-bottom:15px solid #000;
border-left:10px solid transparent;
border-right:10px solid transparent;
width:0;
height:0;
}
这是我们得到的：
为什么会变成这样？下图解释了尺寸，注意底部边框使用了15px，左侧和右侧使用了10px。
通过删除右边框，可以很容易地创建直角三角形。
其他人已经很好地解释了这一点。让我给你一个动画，它将快速解释这一点：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%);
}
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剪辑路径文档剪辑路径浏览器支持
SASS（SCSS）三角形混合
我写这篇文章是为了让自动生成CSS三角形变得更容易（也更干燥）：
// Triangle helper mixin (by Yair Even-Or)
// @param {Direction} $direction - either `top`, `right`, `bottom` or `left`
// @param {Color} $color [currentcolor] - Triangle color
// @param {Length} $size [1em] - Triangle size
@mixin triangle($direction, $color: currentcolor, $size: 1em) {
$size: $size/2;
$transparent: rgba($color, 0);
$opposite: (top:bottom, right:left, left:right, bottom:top);
content: '';
display: inline-block;
width: 0;
height: 0;
border: $size solid $transparent;
border-#{map-get($opposite, $direction)}-color: $color;
margin-#{$direction}: -$size;
}
用例示例：
span {
@include triangle(bottom, red, 10px);
}
游乐场页面
重要提示：如果三角形在某些浏览器中显示为像素化，请尝试此处描述的方法之一。
