CSS技巧-CSS的形状有很多不同的CSS形状,我特别困惑于三角形:
#三角形向上{宽度:0;高度:0;左边框:50px实心透明;右边框:50px实心透明;边框底部:100px纯红色;}<div id=“triangle up”></div>
它是如何以及为什么工作的?
CSS技巧-CSS的形状有很多不同的CSS形状,我特别困惑于三角形:
#三角形向上{宽度:0;高度:0;左边框:50px实心透明;右边框:50px实心透明;边框底部:100px纯红色;}<div id=“triangle up”></div>
它是如何以及为什么工作的?
当前回答
假设我们有以下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;
}
现在我把背景色改成了白色。图像已附加。
因此,我们得到了所需的三角形。
其他回答
边框在相交处使用有角度的边(与等宽边框成45°角,但更改边框宽度可能会扭曲角度)。
第二部分{宽度:60px;边框宽度:30px;边框颜色:红蓝绿黄;边框样式:实心;}<div></div>
看看jsFiddle。
通过隐藏某些边界,您可以获得三角形效果(正如您在上面看到的,通过使不同部分的颜色不同)。透明经常被用作边缘颜色以获得三角形形状。
我知道这是一个旧的方法,但我想在讨论中补充一点,单独使用HTML和CSS创建三角形至少有5种不同的方法。
使用边框使用线性梯度使用圆锥梯度使用转换和溢出使用剪辑路径
我认为,除了方法3(使用圆锥曲线梯度)之外,这里已经介绍了所有内容,所以我将在这里分享:
.三角形{宽度:40px;高度:40px;背景:圆锥形梯度(50%50%,透明135度,绿色0,绿色225度,透明0);}<div class=“triangle”></div>
不同的方法:带变换旋转的CSS3三角形
使用这种技术很容易制作三角形。对于喜欢看动画来解释这项技术的人来说,这里是:
动画链接:如何制作CSS3三角形。和演示:使用变换旋转生成的CSS3三角形。
否则,这里将在4幕(这不是悲剧)中详细解释如何用一个元素制作等腰直角三角形。
注1:对于非等腰三角形和花哨的东西,您可以看到步骤4。注意2:在以下代码段中,不包括供应商前缀。它们包含在codepen演示中。注意3:以下解释的HTML始终是:<div class=“tr”></div>
步骤1:制作一个div
简单,只需确保宽度=1.41 x高度。您可以使用任何技术(参见此处),包括使用百分比和填充底部来保持纵横比并形成响应三角形。在下图中,div有一个金黄色的边框。
在那个div中,插入一个伪元素,并赋予它100%的父元素宽度和高度。伪元素在下图中具有蓝色背景。
此时,我们有了这个CSS:
.tr {
width: 30%;
padding-bottom: 21.27%; /* = width / 1.41 */
position: relative;
}
.tr: before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0079C6;
}
第2步:让我们旋转
首先,最重要的是:定义变换原点。默认原点位于伪元素的中心,我们需要它位于左下角。通过将此CSS添加到伪元素:
变换原点:0 100%;或变换原点:左下;
现在我们可以通过变换将伪元素顺时针旋转45度:旋转(45度);
此时,我们有了这个CSS:
.tr {
width: 30%;
padding-bottom: 21.27%; /* = width / 1.41 */
position: relative;
}
.tr:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0079C6;
transform-origin: 0 100%;
transform: rotate(45deg);
}
第3步:隐藏它
要隐藏伪元素的不需要的部分(用黄色边框溢出div的所有部分),只需设置overflow:hidden;在容器上。去掉黄色边框后,你会。。。三角形!:
DEMO
CSS:
.tr {
width: 30%;
padding-bottom: 21.27%; /* = width / 1.41 */
position: relative;
overflow: hidden;
}
.tr:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #0079C6;
transform-origin: 0 100%;
transform: rotate(45deg);
}
第4步:更进一步。。。
如演示所示,您可以自定义三角形:
通过玩sketchX()使它们变薄或变平。通过播放变换原点和旋转方向,使它们指向左、右或任何其他方向。使用3D变换属性进行一些反射。给出三角形边框在三角形内放置图像更多。。。释放CSS3的力量!
为什么要使用这种技术?
三角形很容易做出反应。你可以做一个带边框的三角形。可以保持三角形的边界。这意味着您只能在光标位于三角形内时触发悬停状态或单击事件。这在某些情况下会变得非常方便,比如每个三角形不能覆盖其邻居,因此每个三角形都有自己的悬停状态。你可以做出一些奇特的效果,比如反射。它将帮助您了解二维和三维变换财产。
为什么不使用此技术?
主要缺点是浏览器兼容性,IE9+支持2d转换财产,因此如果您计划支持IE8,则无法使用此技术。有关更多信息,请参阅CanIuse。对于一些使用3d变换的奇特效果,如反射浏览器支持IE10+(更多信息请参见canIuse)。你不需要任何响应性的东西,一个简单的三角形对你来说很好,那么你应该使用这里解释的边界技术:更好的浏览器兼容性和更容易理解,这要感谢这里的精彩文章。
这是另一把小提琴:
.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/
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);
}
游乐场页面
重要提示:如果三角形在某些浏览器中显示为像素化,请尝试此处描述的方法之一。