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>
它是如何以及为什么工作的?
当前回答
这里是我为演示而创建的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>
其他回答
边框在相交处使用有角度的边(与等宽边框成45°角,但更改边框宽度可能会扭曲角度)。
第二部分{宽度:60px;边框宽度:30px;边框颜色:红蓝绿黄;边框样式:实心;}<div></div>
看看jsFiddle。
通过隐藏某些边界,您可以获得三角形效果(正如您在上面看到的,通过使不同部分的颜色不同)。透明经常被用作边缘颜色以获得三角形形状。
这里是我为演示而创建的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>
其他人已经很好地解释了这一点。让我给你一个动画,它将快速解释这一点: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;
}
在阅读了这里的其他答案后,我发现对于CSS三角形的工作方式有很多很好的解释。我认为这是一种技巧,而不是一种可以通用的技巧。
为了便于阅读和维护,我建议您在SVG中定义几何图形。
然后,可以通过添加data:image/SVG+xml,前缀,使用data-uri转换SVG。作为一个数据uri,它现在可以用作CSS中的背景图像。因为SVG是纯文本的,所以您可以很容易地对几何图形、笔划和填充颜色进行更新。
第三节{宽度:100px;高度:100px;显示:内联块;背景图像:url('data:image/svg+xml,<svg xmlns=“http://www.w3.org/2000/svg“viewBox=”0 0 32 32“><path fill=”red“d=”M31.345 29H1.655L16.5 1.96z“/></svg>');}<div><div class=“tri”></div><div class=“tri”></div><div class=“tri”></div></div>
如果你想改变边框大小、宽度和高度,看看它们如何创建不同的形状,请尝试以下操作:
常量大小=[32,32,32,32];const triangle=document.getElementById('triangle');函数更新({target}){让索引=空;if(目标){index=parseInt(target.id);if(!isNaN(索引)){sizes[index]=目标值;}}window.requestAnimationFrame(()=>{triangle.style.borderWidth=sizes.map(size=>`${size}px`).join(“”);if(isNaN(索引)){triangle.style[target.id]=`${target.value}px`;}});}document.querySelectorAll('input').forEach(input=>{input.oninput=更新;});更新({});正文{边距:0;最小高度:100vh;显示:柔性;对齐内容:中心;对齐项目:居中;溢出:隐藏;}#三角形{边框样式:实心;边框颜色:黄-品红-蓝-黑;背景:青色;高度:0px;宽度:0px;}#控件{位置:固定;底部:0;左:0;右:0;背景:白色;显示:柔性;方框阴影:0 0 32px rgba(0,0,0、.125);}#控件>div{位置:相对;宽度:25%;填充:8px;框大小调整:边框框;显示:柔性;}输入{边距:0;宽度:100%;位置:相对;}<div id=“triangle”style=“border width:32px 32px 32px;”></div><div id=“controls”><div><input-type=“range”min=“0”max=“128”value=“32”id=“0”/></div><div><input-type=“range”min=“0”max=“128”value=“32”id=“1”/></div><div><input-type=“range”min=“0”max=“128”value=“32”id=“2”/></div><div><input-type=“range”min=“0”max=“128”value=“32”id=“3”/></div><div><input-type=“range”min=“0”max=“128”value=“0“id=“width”/></div><div><input-type=“range”min=“0”max=“128”value=“0“id=“height”/></div></div>