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;
}
现在我把背景色改成了白色。图像已附加。
因此,我们得到了所需的三角形。
其他回答
CSS三角:五幕悲剧
正如亚历克斯所说,等宽的边界以45度角相互对接:
如果没有上边框,则如下所示:
然后你给它0的宽度。。。
…高度为0。。。
…最后,使两个侧边透明:
这就形成了一个三角形。
这里是我为演示而创建的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>
假设我们有以下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。
通过隐藏某些边界,您可以获得三角形效果(正如您在上面看到的,通过使不同部分的颜色不同)。透明经常被用作边缘颜色以获得三角形形状。
剪辑路径对我来说效果最好-适用于具有和不具有固定尺寸的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%);
}