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>
它是如何以及为什么工作的?
当前回答
使用剪辑路径:多边形(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%);}
其他回答
考虑下面的三角形
.triangle {
border-bottom:15px solid #000;
border-left:10px solid transparent;
border-right:10px solid transparent;
width:0;
height:0;
}
这是我们得到的:
为什么会变成这样?下图解释了尺寸,注意底部边框使用了15px,左侧和右侧使用了10px。
通过删除右边框,可以很容易地创建直角三角形。
这里是我为演示而创建的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>
从基本的正方形和边框开始。每个边框将被赋予不同的颜色,以便我们可以区分它们:
.三角形{边框颜色:黄-蓝-红-绿;边框样式:实心;边框宽度:200px 200px 200px 200px;高度:0px;宽度:0px;}<div class=“triangle”></div>
这为您提供了:
但不需要顶部边框,因此将其宽度设置为0px。现在,200px的边框底部将使我们的三角形变高200px。
.三角形{边框颜色:黄-蓝-红-绿;边框样式:实心;边框宽度:0px 200px 200px;高度:0px;宽度:0px;}<div class=“triangle”></div>
我们将得到:
然后,要隐藏两个边三角形,请将边框颜色设置为透明。由于顶部边框已被有效删除,因此我们也可以将边框顶部颜色设置为透明。
.三角形{边框颜色:透明透明红色透明;边框样式:实心;边框宽度:0px 200px 200px;高度:0px;宽度:0px;}<div class=“triangle”></div>
最后我们得到了:
CSS三角:五幕悲剧
正如亚历克斯所说,等宽的边界以45度角相互对接:
如果没有上边框,则如下所示:
然后你给它0的宽度。。。
…高度为0。。。
…最后,使两个侧边透明:
这就形成了一个三角形。
这是一个老问题,但我认为值得分享如何使用这种三角形技术创建箭头。
步骤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/